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.
This commit is contained in:
amosblomqvist
2026-09-02 03:12:22 +03:00
parent 671fb0aa25
commit 8f8659c8b4
2 changed files with 6 additions and 2 deletions
+5 -2
View File
@@ -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"
/>