Keep tall diagrams reachable in the preview

src/components/preview-pane.test.tsx

@@ -0,0 +1,32 @@
+import { render, screen } from "@testing-library/react"
+import { describe, expect, it } from "vitest"
+
+import { PreviewPane } from "@/components/preview-pane"
+import { TooltipProvider } from "@/components/ui/tooltip"
+
+describe("PreviewPane", () => {
+  it("keeps an oversized diagram reachable inside a keyboard-scrollable preview", () => {
+    render(
+      <TooltipProvider>
+        <PreviewPane
+          engineVersion="0.8.0"
+          isLoading={false}
+          providerNotices={[]}
+          status="Render completed"
+          svg={'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 2400" />'}
+        />
+      </TooltipProvider>,
+    )
+
+    const preview = screen.getByRole("region", { name: "Rendered diagram preview" })
+    const trigger = screen.getByRole("button", { name: "Expand rendered diagram" })
+    const image = screen.getByAltText("Rendered Stack architecture diagram")
+
+    expect(preview).toHaveClass("overflow-auto")
+    expect(trigger).toHaveAttribute("type", "button")
+    expect(trigger).toHaveClass("m-auto", "shrink-0")
+    expect(trigger).not.toHaveClass("max-h-full")
+    expect(image).toHaveClass("h-auto", "max-w-full")
+    expect(image).not.toHaveClass("max-h-full")
+  })
+})

src/components/preview-pane.tsx

@@ -77,19 +77,22 @@ export function PreviewPane({
         </div>
       </div>
 
-      <div className="flex min-h-0 items-center justify-center overflow-auto p-4 sm:p-6">
+      <section
+        aria-label="Rendered diagram preview"
+        className="flex min-h-0 overflow-auto p-4 sm:p-6"
+      >
         {svg ? (
           <SvgImage svg={svg} />
         ) : (
-          <p className="max-w-xs text-center text-sm leading-6 text-muted-foreground">
+          <p className="m-auto max-w-xs text-center text-sm leading-6 text-muted-foreground">
             {isLoading
               ? "Loading the Stack engine…"
               : status === "Analyzing source…"
                 ? "Analyzing source…"
                 : "Run the source to generate an SVG."}
           </p>
         )}
-      </div>
+      </section>
 
       <div className="flex h-9 items-center justify-between border-t bg-background px-3 font-mono text-[0.6875rem] text-muted-foreground">
         <span aria-live="polite">{status}</span>
@@ -105,12 +108,12 @@ function SvgImage({ svg }: { svg: string }) {
       <DialogTrigger asChild>
         <button
           aria-label="Expand rendered diagram"
-          className="group relative flex max-h-full max-w-full items-center justify-center border bg-white p-2 outline-none transition-colors hover:border-foreground/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-muted"
+          className="group relative m-auto flex max-w-full shrink-0 items-center justify-center border bg-white p-2 outline-none transition-colors hover:border-foreground/50 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-muted"
           type="button"
         >
           <SvgAssetImage
             alt="Rendered Stack architecture diagram"
-            className="max-h-full max-w-full object-contain"
+            className="h-auto max-w-full object-contain"
             svg={svg}
           />
           <span className="absolute right-2 bottom-2 inline-flex items-center gap-1 border bg-white/95 px-2 py-1 font-sans text-[0.6875rem] font-medium text-neutral-900 opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100">