From 8f8659c8b4c14e34b9f2697857ad6700e1d21f5d Mon Sep 17 00:00:00 2001
From: amosblomqvist <amosblomqvist@gmail.com>
Date: Wed, 2 Sep 2026 03:12:22 +0300
Subject: [PATCH] fix: scale rendered SVGs to the display area's full width

Figures now always fill the card's width (h-auto keeps the aspect
ratio): narrower svgs scale up instead of leaving a white strip on the
right when they carry their own background color; oversized ones still
shrink to fit. bg-white stays as a neutral backing for svgs without
their own background.
---
 components/artifacts/visual-card.tsx | 7 +++++--
 tests/demos.test.tsx                 | 1 +
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/components/artifacts/visual-card.tsx b/components/artifacts/visual-card.tsx
index ffed8d0..5c43a02 100644
--- a/components/artifacts/visual-card.tsx
+++ b/components/artifacts/visual-card.tsx
@@ -55,9 +55,12 @@ export function VisualOutputCard({ output }: { output: unknown }) {
 	return (
 		<div className="rounded-xl border bg-card p-4 text-card-foreground" data-testid="visual-card">
 			<div className="text-xs font-medium uppercase tracking-wide text-muted-foreground">Figure</div>
-			{/* max-w-full + h-auto keeps any oversized model-authored svg inside the column */}
+			{/* Scale to the display area: the svg always fills the card's width
+			   (w-full), h-auto keeps the aspect ratio — no white strips beside
+			   narrower figures, oversized ones shrink to fit. bg-white stays as a
+			   neutral backing for svgs without their own background. */}
 			<div
-				className="mt-2 max-w-full overflow-hidden rounded-lg bg-white [&_svg]:h-auto [&_svg]:max-w-full"
+				className="mt-2 overflow-hidden rounded-lg bg-white [&_svg]:h-auto [&_svg]:w-full"
 				dangerouslySetInnerHTML={{ __html: sanitizeSvg(result.svg) }}
 				data-testid="visual-svg"
 			/>
diff --git a/tests/demos.test.tsx b/tests/demos.test.tsx
index fac56ef..b2b349c 100644
--- a/tests/demos.test.tsx
+++ b/tests/demos.test.tsx
@@ -338,6 +338,7 @@ describe("steer card rendering (the delivered artifact)", () => {
 		const html = renderToStaticMarkup(<SubagentSteerCard message={steer as never} />);
 		assert.ok(html.includes("circle"), "svg content rendered inline");
 		assert.match(html, /Figure/);
+		assert.match(html, /svg\]:w-full/, "svg scales to the display area's full width");
 		assert.ok(!html.includes("Looking at the render"), "model-facing notes never render");
 	});