From 9efc0cb5153d602551a7d07ce012d8ce39b99953 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Mon, 10 Aug 2026 23:19:27 -0700
Subject: [PATCH] [eric] browser: a sign-in popup from a browser card keeps
 that card's user agent, so Google stops refusing it (ENG-238); reconnecting
 pill portals to body so it centres

---
 electron/main.js                                        | 7 +++++++
 frontend/src/app/components/Layout/ReconnectingPill.tsx | 8 ++++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/electron/main.js b/electron/main.js
index 4ec1e582..e9b44c2a 100644
--- a/electron/main.js
+++ b/electron/main.js
@@ -2776,6 +2776,13 @@ app.on('web-contents-created', (_event, contents) => {
       // fired, Electron can still spawn the child fullscreen. Force it back.
       if (childWindow.isFullScreen()) childWindow.setFullScreen(false);
     }
+    // A sign-in popup opened FROM a browser card inherits that card's UA. The generic popup spoofer
+    // above hands out a BARE Chrome UA (what Slack's wall wants), but Google rejects bare Chrome as
+    // not-genuine-Chrome, which is why browser cards carry an openswarm product token in the first
+    // place; without this a site's "Continue with Google" was unreachable inside a card (ENG-238).
+    if (contents.getType() === 'webview' && !childWindow.isDestroyed()) {
+      try { childWindow.webContents.setUserAgent(contents.getUserAgent()); } catch (_) { /* popup already gone */ }
+    }
   });
 
   // OAuth callback URL interception. The npm `9router` package's /callback
diff --git a/frontend/src/app/components/Layout/ReconnectingPill.tsx b/frontend/src/app/components/Layout/ReconnectingPill.tsx
index 135c5f6d..a240a56e 100644
--- a/frontend/src/app/components/Layout/ReconnectingPill.tsx
+++ b/frontend/src/app/components/Layout/ReconnectingPill.tsx
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
 import Box from '@mui/material/Box';
 import Grow from '@mui/material/Grow';
 import Typography from '@mui/material/Typography';
@@ -29,7 +30,9 @@ const ReconnectingPill: React.FC = () => {
 
   const show = !reachable && showable;
 
-  return (
+  // Portal to body: `position: fixed` resolves against a transformed ancestor, not the viewport, and
+  // AppShell sits inside one, so the pill rendered visibly off-centre (measured on a screenshot).
+  return createPortal(
     <Grow in={show} unmountOnExit>
       <Box
         onClick={() => window.location.reload()}
@@ -62,7 +65,8 @@ const ReconnectingPill: React.FC = () => {
           click to reload
         </Typography>
       </Box>
-    </Grow>
+    </Grow>,
+    document.body,
   );
 };