towsty/aigen
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Let the studio library fill the same height as Input.

Browse Source 
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>
This commit is contained in:
Towsty
2026-09-01 22:53:23 -05:00
co-authored by Cursor
parent c856d30b50
commit d64a25bbb7
1 changed files with 5 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/index.vue
+5 -14
View File
@@ -7,7 +7,7 @@
@gpu="pollComfyHealth" @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"> <section id="studio-input" class="glass min-w-0 max-w-full rounded-3xl p-5 sm:p-6 space-y-5">
<div> <div>
<div class="mb-4 grid grid-cols-2 gap-3"> <div class="mb-4 grid grid-cols-2 gap-3">
@@ -1205,7 +1205,7 @@
</div> </div>
</section> </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 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 justify-between gap-3">
<div class="flex items-center gap-3"> <div class="flex items-center gap-3">
@@ -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="videoPlayerFrameStyle" :style="{ aspectRatio: `${playerSize.width} / ${playerSize.height}`, maxHeight: 'min(70dvh, 32rem)' }"
> >
<video <video
v-if="videoUrl && !lockedSave" v-if="videoUrl && !lockedSave"
@@ -1561,7 +1561,7 @@
</div> </div>
</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"> <div class="flex items-center justify-between gap-3">
<h2 class="font-display text-xl font-bold">Library</h2> <h2 class="font-display text-xl font-bold">Library</h2>
<div class="flex items-center gap-3"> <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-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 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 <li
v-for="entry in visibleLibraryEntries" v-for="entry in visibleLibraryEntries"
:key="entry.key" :key="entry.key"
@@ -2609,15 +2609,6 @@ 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)