From 2c43a0fbfb7d1d65911484afab970d3f36a0dd5b Mon Sep 17 00:00:00 2001
From: Daniel Han <danielhanchen@gmail.com>
Date: Tue, 26 May 2026 13:05:31 +0000
Subject: [PATCH] Studio: cap generated-image overlay to 520px x min(70vh,
 620px)

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.
---
 .../src/components/assistant-ui/thread.tsx    | 19 ++++++++++++-------
 1 file changed, 12 insertions(+), 7 deletions(-)

diff --git a/studio/frontend/src/components/assistant-ui/thread.tsx b/studio/frontend/src/components/assistant-ui/thread.tsx
index 1951922b74..2cf43f39ad 100644
--- a/studio/frontend/src/components/assistant-ui/thread.tsx
+++ b/studio/frontend/src/components/assistant-ui/thread.tsx
@@ -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"