update data video box

index.html

@@ -33,6 +33,7 @@ body {
   font-family: var(--body);
   min-height: 100vh;
 }
+body.video-tab-active { overflow:hidden; }
 
 /* Grid noise texture */
 body::after {
@@ -290,13 +291,25 @@ header {
 .dir-up   { background:var(--purple); }
 
 /* ── VIDEO PANEL ── */
-#videoPanel { display:none;padding:32px; }
+#videoPanel {
+  display:none;
+  height:calc(100vh - 105px);
+  padding:20px 32px;
+  overflow:hidden;
+}
 
 .video-layout {
   display:flex;
   align-items:stretch;
   gap:20px;
-  min-height:calc(100vh - 125px);
+  height:100%;
+  min-height:0;
+}
+
+.video-stage {
+  min-width:0;
+  flex:1;
+  display:flex;
 }
 
 #view-video {
@@ -310,7 +323,7 @@ header {
   position:relative;
   border:1px solid var(--border);
   border-radius:6px;
-  min-height:420px;
+  min-height:0;
 }
 
 #videoEl { display:block;width:100%;height:100%;object-fit:contain; }
@@ -333,7 +346,15 @@ header {
   letter-spacing:1px;
 }
 
-.video-sidebar { display:flex;flex:0 0 320px;flex-direction:column;gap:14px; }
+.video-sidebar {
+  display:flex;
+  flex:0 0 390px;
+  min-width:360px;
+  flex-direction:column;
+  gap:14px;
+  overflow:auto;
+  padding-right:4px;
+}
 
 .vid-ctrl {
   background:var(--s1);border:1px solid var(--border);border-radius:6px;padding:18px;
@@ -397,13 +418,21 @@ header {
     flex-direction:column;
     min-height:0;
   }
+  #videoPanel {
+    height:calc(100vh - 105px);
+    padding:16px;
+  }
+  .video-stage {
+    flex:1;
+    min-height:0;
+  }
   #view-video {
-    flex:none;
-    min-height:320px;
-    aspect-ratio:16 / 9;
+    min-height:0;
   }
   .video-sidebar {
     flex:0 0 auto;
+    min-width:0;
+    max-height:38vh;
   }
 }
 
@@ -581,7 +610,7 @@ header {
   <div id="videoPanel" style="display:none">
     <div class="video-layout">
 
-      <div>
+      <div class="video-stage">
         <div class="video-wrap" id="view-video">
           <div class="no-video no-signal" id="noSignal">
             <div class="no-video-icon">🎬</div>
@@ -1506,6 +1535,7 @@ function updateLiveCounts(counts) {
 
 // ══ NAVIGATION ════════════════════════════════════════════════════════════════
 function showPage(page) {
+  if (page !== 'dash') document.body.classList.remove('video-tab-active');
   document.getElementById('uploadPage').style.display = page==='upload' ? 'block' : 'none';
   document.getElementById('dashPage').style.display   = page==='dash'   ? 'block' : 'none';
   document.getElementById('btnGoDash').style.display  = page==='dash'   ? 'inline-flex' : 'none';
@@ -1514,6 +1544,7 @@ function showPage(page) {
 function switchDashTab(tab, btn) {
   document.querySelectorAll('.dash-tab').forEach(b => b.classList.remove('active'));
   btn.classList.add('active');
+  document.body.classList.toggle('video-tab-active', tab === 'video');
 
   document.getElementById('tab-overview').style.display = tab==='overview' ? 'block' : 'none';
   document.getElementById('tab-scenes').style.display   = tab==='scenes'   ? 'block' : 'none';