improve responsive behaviour of left / right areas

OpenHypervideo · OpenHypervideo · commit 5a8f3eec0251 · 2026-03-12T13:59:34.000+01:00
diff --git a/src/player/modules/ViewVideo/style.css b/src/player/modules/ViewVideo/style.css
@@ -282,13 +282,13 @@ body.userinactive .mainContainer:not([data-edit-mode="overlays"]):not([data-edit
 }
 
 .areaLeftContainer[data-size="medium"], .areaRightContainer[data-size="medium"] {
-    flex: 0 0 450px;
-    min-width: 450px;
+    flex: 0 0 clamp(300px, 25vw, 450px);
+    min-width: clamp(300px, 25vw, 450px);
 }
 
 .areaLeftContainer[data-size="large"], .areaRightContainer[data-size="large"] {
-    flex: 0 0 650px;
-    min-width: 650px;
+    flex: 0 0 clamp(350px, 35vw, 650px);
+    min-width: clamp(350px, 35vw, 650px);
 }
 
 /* Hidden tabs: reduce area size by 36px (tab bar height) */
@@ -314,13 +314,13 @@ body.userinactive .mainContainer:not([data-edit-mode="overlays"]):not([data-edit
 }
 
 .areaLeftContainer.hiddenTabs[data-size="medium"], .areaRightContainer.hiddenTabs[data-size="medium"] {
-    flex: 0 0 414px;
-    min-width: 414px;
+    flex: 0 0 clamp(264px, calc(25vw - 36px), 414px);
+    min-width: clamp(264px, calc(25vw - 36px), 414px);
 }
 
 .areaLeftContainer.hiddenTabs[data-size="large"], .areaRightContainer.hiddenTabs[data-size="large"] {
-    flex: 0 0 614px;
-    min-width: 614px;
+    flex: 0 0 clamp(314px, calc(35vw - 36px), 614px);
+    min-width: clamp(314px, calc(35vw - 36px), 614px);
 }
 
 .areaTopContainer.closed, .areaBottomContainer.closed {

Original file line number	Diff line number	Diff line change
`@@ -282,13 +282,13 @@ body.userinactive .mainContainer:not([data-edit-mode="overlays"]):not([data-edit`
`282`	`282`	`}`
`283`	`283`
`284`	`284`	`.areaLeftContainer[data-size="medium"], .areaRightContainer[data-size="medium"] {`
`285`		`- flex: 0 0 450px;`
`286`		`- min-width: 450px;`
	`285`	`+ flex: 0 0 clamp(300px, 25vw, 450px);`
	`286`	`+ min-width: clamp(300px, 25vw, 450px);`
`287`	`287`	`}`
`288`	`288`
`289`	`289`	`.areaLeftContainer[data-size="large"], .areaRightContainer[data-size="large"] {`
`290`		`- flex: 0 0 650px;`
`291`		`- min-width: 650px;`
	`290`	`+ flex: 0 0 clamp(350px, 35vw, 650px);`
	`291`	`+ min-width: clamp(350px, 35vw, 650px);`
`292`	`292`	`}`
`293`	`293`
`294`	`294`	`/* Hidden tabs: reduce area size by 36px (tab bar height) */`
`@@ -314,13 +314,13 @@ body.userinactive .mainContainer:not([data-edit-mode="overlays"]):not([data-edit`
`314`	`314`	`}`
`315`	`315`
`316`	`316`	`.areaLeftContainer.hiddenTabs[data-size="medium"], .areaRightContainer.hiddenTabs[data-size="medium"] {`
`317`		`- flex: 0 0 414px;`
`318`		`- min-width: 414px;`
	`317`	`+ flex: 0 0 clamp(264px, calc(25vw - 36px), 414px);`
	`318`	`+ min-width: clamp(264px, calc(25vw - 36px), 414px);`
`319`	`319`	`}`
`320`	`320`
`321`	`321`	`.areaLeftContainer.hiddenTabs[data-size="large"], .areaRightContainer.hiddenTabs[data-size="large"] {`
`322`		`- flex: 0 0 614px;`
`323`		`- min-width: 614px;`
	`322`	`+ flex: 0 0 clamp(314px, calc(35vw - 36px), 614px);`
	`323`	`+ min-width: clamp(314px, calc(35vw - 36px), 614px);`
`324`	`324`	`}`
`325`	`325`
`326`	`326`	`.areaTopContainer.closed, .areaBottomContainer.closed {`