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>
This commit is contained in:
Towsty
2026-09-01 22:50:38 -05:00
co-authored by Cursor
parent 03687b0bd6
commit c856d30b50
2 changed files with 12 additions and 4 deletions
+1 -2
View File
@@ -112,8 +112,7 @@ textarea {
} }
.studio-library-card { .studio-library-card {
content-visibility: auto; contain: none;
contain-intrinsic-size: auto 5.5rem;
} }
.family-nav { .family-nav {
+11 -2
View File
@@ -1295,7 +1295,7 @@
<div <div
class="relative mx-auto mt-5 w-full max-w-full overflow-hidden rounded-2xl bg-black/50" class="relative mx-auto mt-5 w-full max-w-full overflow-hidden rounded-2xl bg-black/50"
:class="{ 'sensitive-glow': awaitingReveal || lockedSave }" :class="{ 'sensitive-glow': awaitingReveal || lockedSave }"
:style="{ aspectRatio: `${playerSize.width} / ${playerSize.height}`, maxHeight: 'min(70dvh, 32rem)' }" :style="videoPlayerFrameStyle"
> >
<video <video
v-if="videoUrl && !lockedSave" 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-red-300 hover:text-red-200" @click="askRemoveSelected">Delete</button>
<button type="button" class="text-zinc-400 hover:text-white" @click="clearSelection">Clear</button> <button type="button" class="text-zinc-400 hover:text-white" @click="clearSelection">Clear</button>
</div> </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 <li
v-for="entry in visibleLibraryEntries" v-for="entry in visibleLibraryEntries"
:key="entry.key" :key="entry.key"
@@ -2609,6 +2609,15 @@ const concealOutput = ref(false)
const concealEditOutput = ref(false) const concealEditOutput = ref(false)
const lockedSave = ref(false) const lockedSave = ref(false)
const playerSize = ref({ width: 1344, height: 768 }) 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 toasts = ref<{ id: string; message: string }[]>([])
const comfyOk = ref(false) const comfyOk = ref(false)
const comfyBusy = ref(false) const comfyBusy = ref(false)