From b3d16b4817738f97c7daabd31a55d86c6f61dc80 Mon Sep 17 00:00:00 2001
From: Towsty <ianjmcarr@gmail.com>
Date: Wed, 2 Sep 2026 15:24:05 -0500
Subject: [PATCH] Let the studio page scroll again instead of locking both
 columns to the viewport.

Output and the library now stop at the input panel height, then scroll inside.

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

diff --git a/pages/index.vue b/pages/index.vue
index 80a6412..3063373 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,16 +1,14 @@
 <template>
-  <div class="min-h-dvh min-w-0 lg:flex lg:h-dvh lg:flex-col lg:overflow-hidden">
-    <div class="shrink-0">
+  <div class="min-h-dvh min-w-0">
     <AppHeader
       :subtitle="ltxEnabled ? 'MiniMax H3 · LTX-2.3 · Flux.2 Klein' : 'MiniMax H3 · Flux.2 Klein'"
       current="studio"
       :queue-count="queueBadgeCount"
       @gpu="pollComfyHealth"
     />
-    </div>
 
-    <main class="mx-auto grid min-w-0 max-w-7xl flex-1 gap-6 px-4 py-6 sm:px-6 lg:min-h-0 lg:grid-cols-[minmax(0,1fr)_minmax(0,1fr)] lg:items-stretch lg:overflow-hidden">
-      <section id="studio-input" class="glass min-w-0 max-w-full space-y-5 rounded-3xl p-5 sm:p-6 lg:min-h-0 lg:overflow-y-auto">
+    <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-start">
+      <section id="studio-input" ref="studioInput" class="glass min-w-0 max-w-full space-y-5 rounded-3xl p-5 sm:p-6">
         <div>
           <div class="mb-4 grid grid-cols-2 gap-3">
             <button
@@ -1209,8 +1207,11 @@
         </div>
       </section>
 
-      <section class="flex min-w-0 max-w-full flex-col gap-5 lg:h-full lg:min-h-0 lg:overflow-hidden">
-        <div ref="outputPanel" class="glass min-w-0 max-w-full rounded-3xl p-5 sm:p-6 lg:max-h-[min(58dvh,38rem)] lg:shrink-0 lg:overflow-y-auto">
+      <section
+        class="flex min-w-0 max-w-full flex-col gap-5 lg:overflow-hidden"
+        :style="studioColumnMax ? { maxHeight: studioColumnMax } : undefined"
+      >
+        <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">
               <h2 class="font-display text-2xl font-bold">Output</h2>
@@ -1300,15 +1301,15 @@
 
           <div v-show="outputPreviewKind === 'video'">
           <div
-            class="relative mx-auto mt-5 w-full max-w-full overflow-hidden rounded-2xl bg-black/50 lg:sticky lg:top-0 lg:z-10"
+            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(36dvh, 20rem)' }"
+            :style="{ aspectRatio: `${playerSize.width} / ${playerSize.height}`, maxHeight: 'min(70dvh, 32rem)' }"
           >
             <video
               v-if="videoUrl && !lockedSave"
               ref="player"
               :src="videoUrl"
-              class="h-full w-full max-h-[min(36dvh,20rem)] bg-black object-contain"
+              class="h-full w-full max-h-[min(70dvh,32rem)] bg-black object-contain"
               :class="{ 'opacity-0': awaitingReveal }"
               :controls="!awaitingReveal"
               :autoplay="autoplayEnabled && !awaitingReveal"
@@ -2451,6 +2452,36 @@ const imageFillWithoutPrompt = computed(() => (
 
 const player = ref<HTMLVideoElement | null>(null)
 const outputPanel = ref<HTMLElement | null>(null)
+const studioInput = ref<HTMLElement | null>(null)
+const studioColumnMax = ref('')
+let studioLayoutObserver: ResizeObserver | null = null
+
+function syncStudioColumnMax() {
+  const input = studioInput.value
+  const output = outputPanel.value
+  if (!input || !window.matchMedia('(min-width: 1024px)').matches) {
+    studioColumnMax.value = ''
+    return
+  }
+  const next = Math.max(input.offsetHeight, (output?.offsetHeight || 0) + 256)
+  studioColumnMax.value = `${next}px`
+}
+
+function bindStudioColumnMax() {
+  unbindStudioColumnMax()
+  syncStudioColumnMax()
+  if (typeof ResizeObserver === 'undefined') return
+  studioLayoutObserver = new ResizeObserver(() => syncStudioColumnMax())
+  if (studioInput.value) studioLayoutObserver.observe(studioInput.value)
+  if (outputPanel.value) studioLayoutObserver.observe(outputPanel.value)
+  window.addEventListener('resize', syncStudioColumnMax)
+}
+
+function unbindStudioColumnMax() {
+  studioLayoutObserver?.disconnect()
+  studioLayoutObserver = null
+  window.removeEventListener('resize', syncStudioColumnMax)
+}
 const editLightbox = ref<HTMLElement | null>(null)
 const editLightboxUrl = ref('')
 const file = ref<File | null>(null)
@@ -3932,9 +3963,12 @@ onMounted(async () => {
   if (route.query.clip || route.query.still) applyIncomingLibraryItem()
   else applyIncomingDirectorScript()
   window.addEventListener('keydown', onStudioKey)
+  await nextTick()
+  bindStudioColumnMax()
 })
 
 onBeforeUnmount(() => {
+  unbindStudioColumnMax()
   unbindConcealListeners()
   window.removeEventListener('keydown', onStudioKey)
   studioPollAlive = false