From d64a25bbb7ebce434035e56dd10badad809e5e61 Mon Sep 17 00:00:00 2001
From: Towsty <ianjmcarr@gmail.com>
Date: Tue, 1 Sep 2026 22:53:23 -0500
Subject: [PATCH] Let the studio library fill the same height as Input.

The right column was stuck to the viewport, so the list only had a sliver left. Both columns now stretch together and the library scrolls after that.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 pages/index.vue | 19 +++++--------------
 1 file changed, 5 insertions(+), 14 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index 283e96d..6064224 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -7,7 +7,7 @@
       @gpu="pollComfyHealth"
     />
 
-    <main class="mx-auto grid min-w-0 max-w-7xl items-start gap-6 px-4 py-6 sm:px-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)]">
+    <main class="mx-auto grid min-w-0 max-w-7xl gap-6 px-4 py-6 sm:px-6 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] lg:items-stretch">
       <section id="studio-input" class="glass min-w-0 max-w-full rounded-3xl p-5 sm:p-6 space-y-5">
         <div>
           <div class="mb-4 grid grid-cols-2 gap-3">
@@ -1205,7 +1205,7 @@
         </div>
       </section>
 
-      <section class="min-w-0 max-w-full space-y-5 lg:sticky lg:top-4 lg:flex lg:max-h-[calc(100dvh-5.5rem)] lg:min-h-0 lg:flex-col lg:overflow-y-auto">
+      <section class="flex min-w-0 max-w-full flex-col gap-5 lg:h-full lg:min-h-0">
         <div ref="outputPanel" class="glass min-w-0 max-w-full rounded-3xl p-5 sm:p-6 lg:shrink-0">
           <div class="flex items-center justify-between gap-3">
             <div class="flex items-center gap-3">
@@ -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="videoPlayerFrameStyle"
+            :style="{ aspectRatio: `${playerSize.width} / ${playerSize.height}`, maxHeight: 'min(70dvh, 32rem)' }"
           >
             <video
               v-if="videoUrl && !lockedSave"
@@ -1561,7 +1561,7 @@
           </div>
         </div>
 
-        <div class="glass rounded-3xl p-5 sm:p-6 lg:flex lg:min-h-0 lg:flex-1 lg:flex-col">
+        <div class="glass rounded-3xl p-5 sm:p-6 lg:flex lg:min-h-[24rem] lg:flex-1 lg:flex-col">
           <div class="flex items-center justify-between gap-3">
             <h2 class="font-display text-xl font-bold">Library</h2>
             <div class="flex items-center gap-3">
@@ -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 min-h-[16rem] max-h-[min(28rem,50vh)] space-y-3 overflow-y-auto lg:min-h-0 lg:flex-1">
+            <ul class="mt-4 max-h-[min(28rem,50vh)] space-y-3 overflow-y-auto lg:max-h-none lg:min-h-0 lg:flex-1">
               <li
                 v-for="entry in visibleLibraryEntries"
                 :key="entry.key"
@@ -2609,15 +2609,6 @@ 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)