From d471d1bdd64942961f64c385110d857f9324f751 Mon Sep 17 00:00:00 2001
From: Towsty <ianjmcarr@gmail.com>
Date: Wed, 2 Sep 2026 15:28:51 -0500
Subject: [PATCH] Put studio scrolling back and actually save image pre-text
 and post-text.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 pages/index.vue             | 46 ++++---------------------------------
 server/utils/studioQueue.ts |  4 ++++
 utils/libraryGeneration.ts  | 12 +++++++---
 3 files changed, 18 insertions(+), 44 deletions(-)

diff --git a/pages/index.vue b/pages/index.vue
index 3063373..efacb0f 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -7,8 +7,8 @@
       @gpu="pollComfyHealth"
     />
 
-    <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">
+    <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 space-y-5 rounded-3xl p-5 sm:p-6">
         <div>
           <div class="mb-4 grid grid-cols-2 gap-3">
             <button
@@ -1207,10 +1207,7 @@
         </div>
       </section>
 
-      <section
-        class="flex min-w-0 max-w-full flex-col gap-5 lg:overflow-hidden"
-        :style="studioColumnMax ? { maxHeight: studioColumnMax } : undefined"
-      >
+      <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">
@@ -1569,7 +1566,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 lg:overflow-hidden">
+        <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">
@@ -1600,7 +1597,7 @@
           </form>
 
           <template v-else>
-            <div class="lg:flex lg:min-h-0 lg:flex-1 lg:flex-col lg:overflow-hidden">
+            <div class="lg:flex lg:min-h-0 lg:flex-1 lg:flex-col">
             <div class="mt-4 flex flex-wrap items-center justify-between gap-2">
               <div class="flex min-w-0 flex-wrap gap-1.5">
                 <button
@@ -2452,36 +2449,6 @@ 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)
@@ -3963,12 +3930,9 @@ 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
diff --git a/server/utils/studioQueue.ts b/server/utils/studioQueue.ts
index 590a1b8..47c7744 100644
--- a/server/utils/studioQueue.ts
+++ b/server/utils/studioQueue.ts
@@ -814,6 +814,8 @@ async function startStudioEditJob(item: StudioJob) {
           folderLocked: payload.folderLocked,
           name: payload.name,
           prompt: payload.prompt,
+          promptPre: payload.promptPre,
+          promptPost: payload.promptPost,
           aspect: payload.aspect || 'auto',
           width: payload.width,
           height: payload.height,
@@ -884,6 +886,8 @@ async function startStudioEditJob(item: StudioJob) {
         folderLocked: payload.folderLocked,
         name: payload.name,
         prompt: payload.prompt,
+        promptPre: payload.promptPre,
+        promptPost: payload.promptPost,
         aspect: payload.aspect || 'auto',
         width: payload.width,
         height: payload.height,
diff --git a/utils/libraryGeneration.ts b/utils/libraryGeneration.ts
index 80a5204..e905c7b 100644
--- a/utils/libraryGeneration.ts
+++ b/utils/libraryGeneration.ts
@@ -1,6 +1,7 @@
 import { loraDisplayName, normalizeLoraStack, type LoraStackItem } from '~/utils/loras'
 import type { ImageV2Engine, ImageV2Mode, ImageV2Task } from '~/utils/imageV2'
 import { isXaigenStudio, type VideoWorkflowId } from '~/utils/videoModels'
+import { restorePromptParts } from '~/utils/promptParts'
 
 export type StillGenerationKind = 'image' | 'imagev2'
 
@@ -34,9 +35,14 @@ export type StillGenerationSettings = {
 export type SettingsRow = { label: string; value: string }
 
 function pushPromptRows(rows: SettingsRow[], item: { prompt?: string; promptPre?: string; promptPost?: string }) {
-  if (item.promptPre?.trim()) rows.push({ label: 'Pre-text', value: item.promptPre.trim() })
-  if (item.prompt?.trim()) rows.push({ label: 'Prompt', value: item.prompt.trim() })
-  if (item.promptPost?.trim()) rows.push({ label: 'Post-text', value: item.promptPost.trim() })
+  const parts = restorePromptParts(item.prompt || '', {
+    pre: item.promptPre,
+    prompt: item.prompt,
+    post: item.promptPost
+  })
+  if (parts.pre.trim()) rows.push({ label: 'Pre-text', value: parts.pre.trim() })
+  if (parts.prompt.trim()) rows.push({ label: 'Prompt', value: parts.prompt.trim() })
+  if (parts.post.trim()) rows.push({ label: 'Post-text', value: parts.post.trim() })
 }
 
 function finiteNumber(raw: unknown): number | undefined {