From 43247831bb7d35f5e1ef009e94c292318cacd04d Mon Sep 17 00:00:00 2001
From: Towsty <ianjmcarr@gmail.com>
Date: Tue, 1 Sep 2026 18:48:49 -0500
Subject: [PATCH] Let the output column scroll when Extend overflows the
 viewport.

The two-column library cap used overflow hidden, so the extend form was clipped with no way to reach Generate.

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

diff --git a/pages/index.vue b/pages/index.vue
index f4af9fb..51371d4 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1212,7 +1212,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:flex-col lg:overflow-hidden">
+      <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">
         <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">
@@ -1383,7 +1383,7 @@
               {{ keepingInputBusy ? 'Saving…' : 'Save as input' }}
             </button>
           </div>
-          <div v-if="extendOpen" class="mt-4 space-y-4 rounded-2xl border border-white/10 bg-zinc-950/50 p-4">
+          <div v-if="extendOpen" id="extend-clip" class="mt-4 space-y-4 rounded-2xl border border-white/10 bg-zinc-950/50 p-4">
             <div class="flex items-start justify-between gap-3">
               <div>
                 <h3 class="text-sm font-semibold text-amber-100">Extend this clip</h3>
@@ -5733,6 +5733,8 @@ async function openExtend(item?: LibraryClip) {
   lastFrameUrl.value = ''
   lastFrameLoading.value = false
   player.value?.pause()
+  await nextTick()
+  document.getElementById('extend-clip')?.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
   if (!hideExtendLastFrame.value) await loadLastFrame(id)
 }