fix(web): avoid topbar tooltip overlap

Author: pallyoung

packages/web/src/components/ui/tooltip/index.test.tsx

@@ -176,6 +176,52 @@ describe("Tooltip", () => {
     });
   });
 
+  it("places the tooltip below the trigger when there is not enough room above", () => {
+    vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(function (
+      this: HTMLElement
+    ) {
+      if (this.getAttribute("role") === "tooltip") {
+        return {
+          x: 0,
+          y: 0,
+          top: 0,
+          left: 0,
+          right: 96,
+          bottom: 24,
+          width: 96,
+          height: 24,
+          toJSON: () => ({}),
+        } as DOMRect;
+      }
+
+      return {
+        x: 120,
+        y: 12,
+        top: 12,
+        left: 120,
+        right: 160,
+        bottom: 44,
+        width: 40,
+        height: 32,
+        toJSON: () => ({}),
+      } as DOMRect;
+    });
+    vi.stubGlobal("innerWidth", 1024);
+    vi.stubGlobal("innerHeight", 768);
+
+    render(
+      <Tooltip content="Settings">
+        <button type="button">Trigger</button>
+      </Tooltip>
+    );
+
+    fireEvent.mouseEnter(screen.getByRole("button", { name: "Trigger" }));
+
+    expect(screen.getByRole("tooltip")).toHaveStyle({
+      top: "52px",
+    });
+  });
+
   it("becomes a no-op wrapper on mobile/coarse viewports", () => {
     viewportMock.value = "mobile";
 

packages/web/src/components/ui/tooltip/index.tsx

@@ -73,14 +73,24 @@ export function Tooltip({ children, content, disabled = false }: TooltipProps) {
 
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const tooltipRect = tooltipRef.current.getBoundingClientRect();
+    const viewportPadding = 8;
     const centeredLeft = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
-    const maxLeft = Math.max(8, window.innerWidth - tooltipRect.width - 8);
-    const left = Math.min(maxLeft, Math.max(8, centeredLeft));
-    const top = triggerRect.top - tooltipRect.height - 8;
+    const maxLeft = Math.max(
+      viewportPadding,
+      window.innerWidth - tooltipRect.width - viewportPadding
+    );
+    const left = Math.min(maxLeft, Math.max(viewportPadding, centeredLeft));
+    const aboveTop = triggerRect.top - tooltipRect.height - viewportPadding;
+    const belowTop = triggerRect.bottom + viewportPadding;
+    const maxTop = Math.max(
+      viewportPadding,
+      window.innerHeight - tooltipRect.height - viewportPadding
+    );
+    const top = aboveTop >= viewportPadding ? aboveTop : Math.min(maxTop, belowTop);
 
     setPosition({
       left,
-      top: Math.max(8, top),
+      top: Math.max(viewportPadding, top),
     });
   }, [open]);