From 248b831e2f9aa158ea6c044bf0fe55d42dd74913 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81lvaro=20Velad=20Galv=C3=A1n?= <ladvan91@hotmail.com>
Date: Fri, 30 Jan 2026 10:59:33 +0100
Subject: [PATCH] fix(UI): Prevent PiP window size issues by using relative
 sizing (#9633)

---
 .csslintrc              |  2 +-
 ui/controls.js          |  3 +++
 ui/less/containers.less | 12 ++++++++++++
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/.csslintrc b/.csslintrc
index 7f38e4919..494207ce6 100644
--- a/.csslintrc
+++ b/.csslintrc
@@ -19,7 +19,7 @@
       "selector-list-comma-newline-after": "always-multi-line",
       "selector-no-vendor-prefix": null,
       "selector-pseudo-element-colon-notation": "single",
-      "unit-allowed-list": ["em", "%", "px", "s", "deg", "vmin", "ms", "vh"],
+      "unit-allowed-list": ["em", "%", "px", "s", "deg", "vmin", "ms", "vh", "vw", "dvh", "dvw"],
       "color-function-notation": "legacy"
     }
 }
diff --git a/ui/controls.js b/ui/controls.js
index 56073ca53..57af6375d 100644
--- a/ui/controls.js
+++ b/ui/controls.js
@@ -1120,8 +1120,11 @@ shaka.ui.Controls = class extends shaka.util.FakeEventTarget {
     // Move player to the Picture-in-Picture window.
     pipWindow.document.body.append(pipPlayer);
 
+    pipPlayer.classList.add('pip-mode');
+
     // Listen for the PiP closing event to move the player back.
     this.eventManager_.listenOnce(pipWindow, 'pagehide', () => {
+      pipPlayer.classList.remove('pip-mode');
       placeholder.replaceWith(/** @type {!Node} */(pipPlayer));
     });
   }
diff --git a/ui/less/containers.less b/ui/less/containers.less
index 509f69982..8017e8888 100644
--- a/ui/less/containers.less
+++ b/ui/less/containers.less
@@ -35,6 +35,18 @@
   :before {
     box-sizing: revert;
   }
+
+  /* stylelint-disable max-line-length, declaration-block-no-duplicate-properties, unit-no-unknown */
+  &.pip-mode {
+    background-color: @general-background-color-opaque;
+    // Old browsers
+    width: 100vw;
+    height: 100vh;
+    // Modern browsers
+    width: 100dvw;
+    height: 100dvh;
+  }
+  /* stylelint-enable max-line-length, declaration-block-no-duplicate-properties, unit-no-unknown */
 }
 
 /* Each browser has a different prefixed pseudo-class for fullscreened elements.