Refactor layout styles for improved responsiveness; add video height constraint on resize

static/css/style.css

@@ -82,17 +82,18 @@ header {
   text-transform: uppercase;
 }
 
-/* Layout: row with golden-ratio split, collapse on small */
+/* Layout: row with split, collapse on small */
 .layout {
   display: flex;
   flex-direction: row;
-  align-items: flex-start;
+  align-items: stretch;
   gap: 20px;
   padding: 20px 24px;
   flex: 1;
   max-width: 100%;
   margin: 0 auto;
   width: 100%;
+  min-height: 0;
 }
 
 /* Region filter bar */
@@ -144,6 +145,7 @@ header {
   flex-direction: column;
   gap: 12px;
   min-width: 0;
+  min-height: 0;
 }
 
 .video-stage {
@@ -154,6 +156,8 @@ header {
   box-shadow: var(--shadow);
   border: 1px solid var(--border);
   width: 100%;
+  flex: 1;
+  min-height: 0;
 }
 .video-stage video {
   width: 100%;

static/js/app.js

@@ -362,8 +362,27 @@
     if (clip) playClip(clip);
   });
 
+  // ---- Resize: keep video-stage within viewport ----
+  function constrainVideoHeight() {
+    const stage = document.querySelector(".video-stage");
+    const panel = document.querySelector(".player-panel");
+    if (!stage || !panel) return;
+    const header = document.querySelector("header");
+    const headerH = header ? header.getBoundingClientRect().height : 0;
+    const layout = document.querySelector(".layout");
+    if (!layout) return;
+    const layoutStyle = getComputedStyle(layout);
+    const padTop = parseFloat(layoutStyle.paddingTop) || 0;
+    const padBot = parseFloat(layoutStyle.paddingBottom) || 0;
+    const gap = parseFloat(layoutStyle.gap) || 0;
+    const availH = window.innerHeight - headerH - padTop - padBot - gap;
+    panel.style.maxHeight = Math.max(200, availH) + "px";
+  }
+
   // ---- Init: fetch full video data, then auto-play front ----
   function init() {
+    constrainVideoHeight();
+    window.addEventListener("resize", constrainVideoHeight);
     // Fetch regions data for the filter bar
     fetchRegions();