fix(desktop): keep tooltips clear of the native window controls

[Gigioxx]

Hovering the line-wrapping toggle in the diff panel toolbar showed its tooltip inside the titlebar strip, where the OS composites the minimize, maximize, and close buttons above every DOM layer. Raising z-index cannot win that, because the controls are not part of the page.

The tooltip positioner now reserves the window-controls-overlay height as collision padding, so a tooltip that would land in that strip flips below its trigger instead. The height comes from navigator.windowControlsOverlay.getTitlebarAreaRect() and tracks geometrychange, so it is 0 in the browser and follows the real strip in Electron. Fixing it in the shared TooltipPopup covers every tooltip near the top of the window, not just the one in the report.

Fixes #8882

Before / After

Linux, Electron dev build, diff panel open, hovering "Disable line wrapping".

Before	After

Validation

• vp fmt apps/web/src/components/ui/tooltip.tsx apps/web/src/lib/windowControlsOverlay.ts --check
• vp lint apps/web/src/components/ui/tooltip.tsx apps/web/src/lib/windowControlsOverlay.ts --report-unused-disable-directives
• vp run --filter @t3tools/web typecheck
• Reproduced in the Electron dev app on Linux over CDP. The trigger sits at y 39.5 with a 40px overlay strip. Before the change the positioner reported side="top" at y 9.5, inside the strip; after it reports side="bottom" at y 71.5.
• Re-probed neighbouring tooltips in the same session: titlebar controls, diff toolbar, sidebar footer, and the composer. Placement is unchanged everywhere the strip is not in the way.

Built with Claude Opus 5 in T3 Code.

---

Note

Low Risk
Localized UI positioning change for tooltips with a safe SSR/default of zero height; no auth, data, or security impact.

Overview
Tooltips near the top of the Electron window no longer render under the OS titlebar controls by treating that strip as a collision boundary on the shared TooltipPopup positioner.

TooltipPopup now passes explicit collisionPadding to Base UI’s positioner, with extra top padding equal to the window-controls overlay height (on top of the default 5px). When a tooltip would flip above a trigger into that strip, it flips below instead.

A new useWindowControlsOverlayHeight hook in windowControlsOverlay.ts reads navigator.windowControlsOverlay.getTitlebarAreaRect().height when the overlay is visible, subscribes to geometrychange, and returns 0 on the server or when the API is absent—so browser builds are unchanged.

^{Reviewed by Cursor Bugbot for commit 1f5afaa. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Keep tooltips clear of native window controls via overlay-aware collision padding

• Adds useWindowControlsOverlayHeight hook in windowControlsOverlay.ts using useSyncExternalStore to track the Window Controls Overlay titlebar height reactively (0 on server or when unavailable)
• Updates TooltipPopup in tooltip.tsx to pass a collisionPadding object whose top equals a base COLLISION_PADDING (5) plus the overlay height, so tooltips flip away from the native titlebar area
• Risk: tooltips on non-desktop browsers without a Window Controls Overlay behave as before (top padding stays 5); on desktop PWA installs, the top collision margin increases by the titlebar height, which may alter flip behavior for tooltips near the top edge

^{Macroscope summarized 1f5afaa.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: b8ef2578-26ee-4409-9a23-a5146ed806f1

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

Warning

Your free Security trial is over. An organization admin can activate Security or dismiss this notice.

---

_{Comment @coderabbitai help to get the list of available commands.}

[macroscopeapp]

Approvability

Verdict: Approved at 1f5afaa

Macroscope's review found this PR approvable — This is a localized desktop tooltip-positioning fix that preserves existing browser behavior while reserving the Electron native titlebar area. The implementation is small, self-contained, and has no schema, security, billing, data, or deployment impact.

^{You can add or adjust custom eligibility rules. Learn more.}

[shivamhwp]

Note: GPT-6 on behalf of shivam (@shivamhwp).

This conflicts with current main in windowControlsOverlay.ts after #10227 made getElectronPlatformClassNames private. Please update the branch, retain that private helper, and keep the new overlay-height hook above it. The collision-padding approach still addresses the reported tooltip placement.