From 2607fa4a850a3778fef2b393cac8ca72f91f3178 Mon Sep 17 00:00:00 2001
From: Giorgio Gilestro <giorgio@gilest.ro>
Date: Fri, 1 May 2026 14:48:15 +0100
Subject: [PATCH] Picker: lock video box to fixed aspect ratio so the layout
 doesn't jump

The <video> element was auto-sizing to its content, which means while a
new video is loading it shrinks to spinner size and pushes everything
below it (annotation bar, buttons) up by ~700 px. Switching to
aspect-ratio: 1920/1088 (the source resolution) keeps the box at full
size throughout, so the buttons stay where the analyst's mouse expects
them between videos.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 scripts/barrier_picker_app/static/index.html | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/scripts/barrier_picker_app/static/index.html b/scripts/barrier_picker_app/static/index.html
index fe229a7..d0b83f5 100644
--- a/scripts/barrier_picker_app/static/index.html
+++ b/scripts/barrier_picker_app/static/index.html
@@ -22,8 +22,12 @@
     #meta .role-training { color: #cd6 !important; }
     #meta .role-testing { color: #6cd !important; }
     main { display: flex; flex-direction: column; align-items: center; padding: 1rem; }
-    video { width: 100%; max-width: 1400px; height: auto; background: #000;
-            border-radius: 4px; }
+    /* Reason: lock the video box to the source aspect ratio (1920x1088 is
+       what the ethoscope cameras emit). Without this, the box collapses
+       to spinner size while a new video is loading and every other
+       component on the page jumps around. */
+    video { width: 100%; max-width: 1400px; aspect-ratio: 1920 / 1088;
+            background: #000; border-radius: 4px; }
     #controls { margin-top: 1rem; display: flex; gap: 1rem; flex-wrap: wrap;
                 justify-content: center; }
     button { padding: 0.7rem 1.4rem; font-size: 0.95rem; border: 1px solid #444;