diff --git a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx index e721d2f3..62971f34 100644 --- a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx +++ b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx @@ -753,10 +753,11 @@ const BrowserCard: React.FC = ({ top: displayY, width: displayW, height: displayH, - borderRadius: `${c.radius.lg}px`, - border: agentBorder, - bgcolor: c.bg.surface, - boxShadow: agentShadow, + borderRadius: keepAliveHidden ? 0 : `${c.radius.lg}px`, + // A hidden cross-dashboard card drops its border/shadow so the cover overlay below blends fully into the dashboard background instead of reading as a card outline. + border: keepAliveHidden ? 'none' : agentBorder, + bgcolor: keepAliveHidden ? c.bg.page : c.bg.surface, + boxShadow: keepAliveHidden ? 'none' : agentShadow, overflow: 'hidden', display: 'flex', flexDirection: 'column', @@ -1483,6 +1484,11 @@ const BrowserCard: React.FC = ({ }} /> ))} + + {/* Cover the whole card (incl. the webview surface) with an opaque dashboard-colored layer when it's a kept-alive card from another dashboard: the guest stays composited underneath so its login survives, but it can't bleed onto the dashboard you're viewing. Host DOM does paint over a (same as the agent overlay), which CSS visibility/off-screen can't reliably do without killing the session. */} + {keepAliveHidden && ( + + )} ); };