From 901d9ff070ad793048bea95aa6ce802a0098d417 Mon Sep 17 00:00:00 2001
From: ciregenz <ciregenz@berkeley.edu>
Date: Fri, 7 Aug 2026 18:10:25 -0700
Subject: [PATCH] [eric] browser: back, forward and reload lose their tooltips,
 which only ever landed on top of the page

---
 .../app/pages/Dashboard/cards/BrowserCard.tsx | 67 +++++++++----------
 1 file changed, 31 insertions(+), 36 deletions(-)

diff --git a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
index e0f85185..9a10ac2f 100644
--- a/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
+++ b/frontend/src/app/pages/Dashboard/cards/BrowserCard.tsx
@@ -1507,44 +1507,39 @@ const BrowserCard: React.FC<Props> = ({
           flexShrink: 0,
         }}
       >
-        <Tooltip title="Back" placement="top">
-          <span>
-            <IconButton
-              size="small"
-              onClick={handleBack}
-              onPointerDown={(e) => e.stopPropagation()}
-              disabled={!activeLocal.canGoBack}
-              sx={{ color: CHROME_TEXT_MUTED, p: 0.4, '&:hover': { color: CHROME_TEXT } }}
-            >
-              <ArrowBackIcon sx={{ fontSize: 15 }} />
-            </IconButton>
-          </span>
-        </Tooltip>
+        {/* No tooltips on back/forward/reload: every browser on earth uses these arrows, so the label
+            teaches nothing and the popup lands right on top of the page you are trying to read. */}
+        <IconButton
+          size="small"
+          aria-label="Back"
+          onClick={handleBack}
+          onPointerDown={(e) => e.stopPropagation()}
+          disabled={!activeLocal.canGoBack}
+          sx={{ color: CHROME_TEXT_MUTED, p: 0.4, '&:hover': { color: CHROME_TEXT } }}
+        >
+          <ArrowBackIcon sx={{ fontSize: 15 }} />
+        </IconButton>
 
-        <Tooltip title="Forward" placement="top">
-          <span>
-            <IconButton
-              size="small"
-              onClick={handleForward}
-              onPointerDown={(e) => e.stopPropagation()}
-              disabled={!activeLocal.canGoForward}
-              sx={{ color: CHROME_TEXT_MUTED, p: 0.4, '&:hover': { color: CHROME_TEXT } }}
-            >
-              <ArrowForwardIcon sx={{ fontSize: 15 }} />
-            </IconButton>
-          </span>
-        </Tooltip>
+        <IconButton
+          size="small"
+          aria-label="Forward"
+          onClick={handleForward}
+          onPointerDown={(e) => e.stopPropagation()}
+          disabled={!activeLocal.canGoForward}
+          sx={{ color: CHROME_TEXT_MUTED, p: 0.4, '&:hover': { color: CHROME_TEXT } }}
+        >
+          <ArrowForwardIcon sx={{ fontSize: 15 }} />
+        </IconButton>
 
-        <Tooltip title="Reload" placement="top">
-          <IconButton
-            size="small"
-            onClick={handleRefresh}
-            onPointerDown={(e) => e.stopPropagation()}
-            sx={{ color: CHROME_TEXT_MUTED, p: 0.4, '&:hover': { color: CHROME_TEXT } }}
-          >
-            <RefreshIcon sx={{ fontSize: 15 }} />
-          </IconButton>
-        </Tooltip>
+        <IconButton
+          size="small"
+          aria-label="Reload"
+          onClick={handleRefresh}
+          onPointerDown={(e) => e.stopPropagation()}
+          sx={{ color: CHROME_TEXT_MUTED, p: 0.4, '&:hover': { color: CHROME_TEXT } }}
+        >
+          <RefreshIcon sx={{ fontSize: 15 }} />
+        </IconButton>
 
         {/* URL bar */}
         <Box