From 813ddd2fe17900178fd0866dc32aa8088df1df08 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Fri, 26 Jun 2026 06:46:43 -0700
Subject: [PATCH] [eric] browser: cover the hidden cross-dashboard card with an
 opaque dashboard-colored layer (hides the live webview surface with NO
 logout, since the guest stays composited)

---
 .../src/app/pages/Dashboard/cards/BrowserCard.tsx  | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

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<Props> = ({
         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<Props> = ({
           }}
         />
       ))}
+
+      {/* 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 <webview> (same as the agent overlay), which CSS visibility/off-screen can't reliably do without killing the session. */}
+      {keepAliveHidden && (
+        <Box sx={{ position: 'absolute', inset: 0, zIndex: 2147483647, bgcolor: c.bg.page, pointerEvents: 'none', visibility: 'visible' }} />
+      )}
     </Box>
   );
 };