From e3942dbaa2c673857ab98d9e1712ee9ed9d74dff Mon Sep 17 00:00:00 2001 From: ciregenz Date: Mon, 17 Aug 2026 20:08:22 -0700 Subject: [PATCH] [eric] canvas: miniature corner radius compensates for the scale transform, so scaled-down cards stop painting near-square corners next to the pill capsule --- frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx index 9ccf62bc..e899093c 100644 --- a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx +++ b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx @@ -1278,7 +1278,8 @@ const BrowserCard: React.FC = ({ transformOrigin: tiledSize || dockActive || followsParent ? '0 0' : undefined, width: tiledSize ? tiledSize.width : displayW, height: tiledSize ? tiledSize.height : displayH, - borderRadius: tileZone === 'fullscreen' ? '12px' : dockActive || followsParent ? '12px' : `${c.radius.lg}px`, + // The scale transform shrinks corner radii too (12px at 0.35x paints ~4px, reading as a cut corner next to the pill's capsule); divide by the scale so the MINIATURE'S corners stay visually 12px. + borderRadius: tileZone === 'fullscreen' ? '12px' : dockActive ? `${Math.round(12 / Math.min(dockRect!.w / displayW, dockRect!.h / displayH))}px` : followsParent ? `${Math.round(12 / Math.min(1, 320 / displayW))}px` : `${c.radius.lg}px`, // Docked = an embedded block, not a floating window: a drop shadow and heavy accent frame read as a detached card pasted over the chat. border: dockActive || followsParent ? `1px solid ${c.border.medium}` : agentBorder, bgcolor: c.bg.surface,