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

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();