From c1792bc9a6f3c2fa62ee7cb66991b4d6508781a2 Mon Sep 17 00:00:00 2001
From: Julius Marminge <51714798+juliusmarminge@users.noreply.github.com>
Date: Fri, 12 Jun 2026 19:58:15 -0700
Subject: [PATCH] Use real preview tooltips

---
 apps/web/src/components/RightPanelTabs.tsx    | 25 ++++---
 .../components/preview/PreviewChromeRow.tsx   | 68 +++++++++++--------
 2 files changed, 54 insertions(+), 39 deletions(-)

diff --git a/apps/web/src/components/RightPanelTabs.tsx b/apps/web/src/components/RightPanelTabs.tsx
index 7c07b61d931a4f25533fbdd4c0e016b7c3b5bd32..b4d5c9cbb4582eab0492a79b8f79920b379e6f82 100644
--- a/apps/web/src/components/RightPanelTabs.tsx
+++ b/apps/web/src/components/RightPanelTabs.tsx
@@ -7,6 +7,7 @@ import { isElectron } from "~/env";
 import type { RightPanelSurface } from "~/rightPanelStore";
 import { cn } from "~/lib/utils";
 import { Menu, MenuItem, MenuPopup, MenuTrigger } from "~/components/ui/menu";
+import { Tooltip, TooltipPopup, TooltipTrigger } from "~/components/ui/tooltip";
 import { faviconUrlForOrigin } from "~/lib/favicon";
 
 import { PreviewPanelShell, type PreviewPanelMode } from "./preview/PreviewPanelShell";
@@ -185,15 +186,21 @@ export function RightPanelTabs(props: RightPanelTabsProps) {
                     : "text-muted-foreground hover:bg-accent/60 hover:text-foreground",
                 )}
               >
-                <button
-                  type="button"
-                  className="flex min-w-0 flex-1 items-center gap-1.5"
-                  onClick={() => props.onActivate(surface)}
-                  title={title}
-                >
-                  <SurfaceIcon surface={surface} sessions={props.previewSessions} />
-                  <span className="truncate">{title}</span>
-                </button>
+                <Tooltip>
+                  <TooltipTrigger
+                    render={
+                      <button
+                        type="button"
+                        className="flex min-w-0 flex-1 items-center gap-1.5"
+                        onClick={() => props.onActivate(surface)}
+                      >
+                        <SurfaceIcon surface={surface} sessions={props.previewSessions} />
+                        <span className="truncate">{title}</span>
+                      </button>
+                    }
+                  />
+                  <TooltipPopup>{title}</TooltipPopup>
+                </Tooltip>
                 <button
                   type="button"
                   className="rounded p-0.5 opacity-0 hover:bg-muted group-hover:opacity-100 focus:opacity-100"
diff --git a/apps/web/src/components/preview/PreviewChromeRow.tsx b/apps/web/src/components/preview/PreviewChromeRow.tsx
index 1452e6c758854707ebb5d13c09281cb06626d5cf..057db6d801f0a76fc2e51f9b0b0f690392c15ec9 100644
--- a/apps/web/src/components/preview/PreviewChromeRow.tsx
+++ b/apps/web/src/components/preview/PreviewChromeRow.tsx
@@ -169,37 +169,45 @@ export function PreviewChromeRow({
         </div>
 
         <InputGroup className="group/address h-7 flex-1 rounded-md border-transparent bg-transparent shadow-none before:shadow-none hover:bg-muted/40 focus-within:bg-background">
-          <InputGroupInput
-            ref={inputRef}
-            value={inputFocused ? draft : (displayUrl ?? draft)}
-            className={cn(
-              onOpenInBrowser && !inputFocused && "group-hover/address:pe-7 transition-[padding]",
-            )}
-            onChange={(event) => setDraft(event.target.value)}
-            onFocus={() => {
-              setDraft(url);
-              setInputFocused(true);
-              queueMicrotask(() => inputRef.current?.select());
-            }}
-            onBlur={() => {
-              setDraft(url);
-              setInputFocused(false);
-            }}
-            onKeyDown={(event) => {
-              if (event.key === "Enter") submit(event);
-              if (event.key === "Escape") {
-                event.preventDefault();
-                setDraft(url);
-                inputRef.current?.blur();
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <InputGroupInput
+                  ref={inputRef}
+                  value={inputFocused ? draft : (displayUrl ?? draft)}
+                  className={cn(
+                    onOpenInBrowser &&
+                      !inputFocused &&
+                      "group-hover/address:pe-7 transition-[padding]",
+                  )}
+                  onChange={(event) => setDraft(event.target.value)}
+                  onFocus={() => {
+                    setDraft(url);
+                    setInputFocused(true);
+                    queueMicrotask(() => inputRef.current?.select());
+                  }}
+                  onBlur={() => {
+                    setDraft(url);
+                    setInputFocused(false);
+                  }}
+                  onKeyDown={(event) => {
+                    if (event.key === "Enter") submit(event);
+                    if (event.key === "Escape") {
+                      event.preventDefault();
+                      setDraft(url);
+                      inputRef.current?.blur();
+                    }
+                  }}
+                  placeholder="Search or enter URL"
+                  spellCheck={false}
+                  disabled={inputDisabled}
+                  data-preview-url-input
+                  size="sm"
+                />
               }
-            }}
-            placeholder="Search or enter URL"
-            spellCheck={false}
-            disabled={inputDisabled}
-            data-preview-url-input
-            title={!inputFocused && displayUrl ? url : undefined}
-            size="sm"
-          />
+            />
+            {!inputFocused && displayUrl ? <TooltipPopup>{url}</TooltipPopup> : null}
+          </Tooltip>
           {onOpenInBrowser && !inputFocused ? (
             <InputGroupAddon
               align="inline-end"
-- 
2.54.0