diff --git a/assets/css/display.css b/assets/css/display.css
index 2d66e08..71ad9d0 100644
--- a/assets/css/display.css
+++ b/assets/css/display.css
@@ -324,24 +324,32 @@
   display: flex;
   flex: 1;
   min-height: 0;
+  min-width: 0;
   flex-direction: column;
 }
 
+/* Stage: fills center column above filmstrip + transport */
 .viewer-frame {
   position: relative;
-  display: grid;
+  display: flex;
   flex: 1;
-  min-height: 360px;
-  place-items: center;
+  min-height: 0;
+  min-width: 0;
+  align-items: center;
+  justify-content: center;
   overflow: hidden;
-  background: #0a0a0c;
+  background: #0b0b0d;
 }
 
-.viewer-frame img,
-.viewer-frame video {
+/* Grow until width or height hits the stage; letterbox/pillarbox via contain */
+.viewer-frame > img,
+.viewer-frame > video {
+  width: 100%;
+  height: 100%;
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
+  object-position: center;
 }
 
 .eye-viewer {
diff --git a/components/studio2/Bench.vue b/components/studio2/Bench.vue
index f3ed5a1..f3204f4 100644
--- a/components/studio2/Bench.vue
+++ b/components/studio2/Bench.vue
@@ -171,7 +171,6 @@
         ref="viewerVideo"
         :key="selected.id"
         :src="`/api/library/clips/${selected.id}/video`"
-        class="h-full w-full"
         :muted="viewerMuted"
         @timeupdate="onVideoTime"
         @loadedmetadata="onVideoTime"