ceos/unsloth
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Studio: cap generated-image overlay to 520px x min(70vh, 620px)

Browse source 
Previous overlay used `max-h-full max-w-full object-contain`, which fills
whatever flex area is available. On large viewports that scales a
generated image past its intrinsic resolution and turns it soft.

Explicit caps: `h-auto`, `w-auto`, `max-w-[520px]`, `max-h-[min(70vh, 620px)]`.
Aspect ratio preserved, only downscales. Wrapped the image in an
`inline-block` relative box so the download/close buttons anchor to the
image's actual top-right corner instead of the wider flex container.
This commit is contained in:
Daniel Han 2026-05-26 13:05:31 +00:00
commit 2c43a0fbfb
1 changed files with 12 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

19
studio/frontend/src/components/assistant-ui/thread.tsx
View file

@ -231,13 +231,17 @@ const GeneratedImageViewportOverlay: FC<{ hideComposer?: boolean }> = ({
aria-label="Generated image preview"
>
<div className="pointer-events-auto relative flex min-h-0 w-full max-w-[1100px] flex-1 flex-col items-center justify-center gap-3">
<div className="relative flex min-h-0 flex-1 items-center justify-center">
<img
src={overlay.image}
alt={overlay.title}
className="max-h-full max-w-full rounded-2xl object-contain"
/>
<div className="absolute right-2 top-2 z-10 flex shrink-0 items-center gap-2 rounded-full bg-background/80 p-1.5 ring-1 ring-border/30 backdrop-blur-sm">
<div className="flex min-h-0 flex-1 items-center justify-center">
<div className="relative inline-block">
<img
src={overlay.image}
alt={overlay.title}
// Keep aspect ratio + downscale only: explicit caps so a
// huge viewport doesn't scale a generated image past its
// intrinsic resolution and turn soft.
className="block h-auto max-h-[min(70vh,620px)] w-auto max-w-[520px] rounded-2xl object-contain"
/>
<div className="absolute right-2 top-2 z-10 flex shrink-0 items-center gap-2 rounded-full bg-background/80 p-1.5 ring-1 ring-border/30 backdrop-blur-sm">
<Button
type="button"
variant="ghost"
@ -264,6 +268,7 @@ const GeneratedImageViewportOverlay: FC<{ hideComposer?: boolean }> = ({
<XIcon className="size-5" strokeWidth={2} />
</Button>
</div>
</div>
</div>
<div
className="w-full max-w-[min(100%,46rem)] shrink-0 text-center"