From c856d30b50db2f5f3b043aad16d86c1c7c01c03f Mon Sep 17 00:00:00 2001
From: Towsty <ianjmcarr@gmail.com>
Date: Tue, 1 Sep 2026 22:50:38 -0500
Subject: [PATCH] Stop the empty MP4 box from crushing the studio library.

With no clip loaded, the output frame no longer reserves a full video aspect, so the library list can scroll more than one card.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 assets/css/main.css |  3 +--
 pages/index.vue     | 13 +++++++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/assets/css/main.css b/assets/css/main.css
index b35eaf3..09b6312 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -112,8 +112,7 @@ textarea {
 }
 
 .studio-library-card {
-  content-visibility: auto;
-  contain-intrinsic-size: auto 5.5rem;
+  contain: none;
 }
 
 .family-nav {
diff --git a/pages/index.vue b/pages/index.vue
index b5799bc..283e96d 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1295,7 +1295,7 @@
           <div
             class="relative mx-auto mt-5 w-full max-w-full overflow-hidden rounded-2xl bg-black/50"
             :class="{ 'sensitive-glow': awaitingReveal || lockedSave }"
-            :style="{ aspectRatio: `${playerSize.width} / ${playerSize.height}`, maxHeight: 'min(70dvh, 32rem)' }"
+            :style="videoPlayerFrameStyle"
           >
             <video
               v-if="videoUrl && !lockedSave"
@@ -1646,7 +1646,7 @@
               <button type="button" class="text-red-300 hover:text-red-200" @click="askRemoveSelected">Delete</button>
               <button type="button" class="text-zinc-400 hover:text-white" @click="clearSelection">Clear</button>
             </div>
-            <ul class="mt-4 max-h-[min(28rem,50vh)] space-y-3 overflow-y-auto lg:min-h-0 lg:max-h-none lg:flex-1">
+            <ul class="mt-4 min-h-[16rem] max-h-[min(28rem,50vh)] space-y-3 overflow-y-auto lg:min-h-0 lg:flex-1">
               <li
                 v-for="entry in visibleLibraryEntries"
                 :key="entry.key"
@@ -2609,6 +2609,15 @@ const concealOutput = ref(false)
 const concealEditOutput = ref(false)
 const lockedSave = ref(false)
 const playerSize = ref({ width: 1344, height: 768 })
+const videoPlayerFrameStyle = computed(() => {
+  if (!videoUrl.value && !videoBusy.value && !awaitingReveal.value && !lockedSave.value) {
+    return { minHeight: '8rem' }
+  }
+  return {
+    aspectRatio: `${playerSize.value.width} / ${playerSize.value.height}`,
+    maxHeight: 'min(70dvh, 32rem)'
+  }
+})
 const toasts = ref<{ id: string; message: string }[]>([])
 const comfyOk = ref(false)
 const comfyBusy = ref(false)