Fix desktop floating overlays drifting at app zoom >=115%

[craigk]

Fix desktop floating overlays drifting at app zoom >=115%

Summary

On desktop and fullscreen layouts, filter dropdowns drift horizontally to the right when application zoom is increased above approximately 115%. At 125% zoom, the drift can place menus over the wrong columns or outside the visible content area.

This affects dropdowns, tooltips, and selects that use the shared portal components.

Reproduction

1. Open the task issue tracker at a desktop-sized window.
2. Select an issue so the Details shelf is available.
3. Set application zoom to 125% or higher.
4. Click Type, Labels, Status, Priority, or Assignee in the issue toolbar.
5. Compare the dropdown left edge with its trigger.
6. Repeat with the Details shelf collapsed and expanded.

Actual behavior

The floating menu appears shifted right of its trigger. The displacement increases for controls farther right and may be clipped by the main application container. Opening the Details shelf changes the amount of drift but does not resolve the underlying issue.

Expected behavior

Floating content remains aligned with its trigger at all supported zoom levels: 75%, 100%, 115%, 125%, and 150%, with the Details shelf either collapsed or expanded.

Root cause

The application applies CSS zoom to #zoomable-content, while shared floating components teleport into that same zoomed subtree. Reka/Floating UI calculates position: fixed coordinates in viewport space, then the zoomed ancestor scales those coordinates a second time.

At 125%, the approximate horizontal drift is:

drift = anchorX × 0.25

This is a coordinate-space mismatch rather than a thrown JavaScript exception. Collision middleware prevents a crash, but the menu can still be visually out of bounds or clipped.

Affected shared components

• app/components/ui/dropdown-menu/DropdownMenuContent.vue
• app/components/ui/tooltip/TooltipContent.vue
• app/components/ui/select/SelectContent.vue

Affected areas include issue filters, column configuration, exclusion filters, dashboard controls, table actions, header controls, issue-form selectors, and tooltips.

Proposed fix

Create a dedicated floating overlay root outside #zoomable-content. Portal floating positioning wrappers into that unzoomed root, and apply the current application zoom only to the floating surface itself. This keeps viewport coordinates unscaled while preserving visual consistency with the zoomed application.

Acceptance criteria

• Filter dropdowns align at 75%, 100%, 115%, 125%, and 150% zoom.
• Alignment works with the Details shelf collapsed and expanded.
• Type, Labels, Status, Priority, and Assignee dropdowns are covered.
• Tooltips and issue-form selects remain correctly positioned and scaled.
• Floating content is not clipped by the zoomed application container.
• Outside-click dismissal, keyboard focus, Escape-to-close, collision flipping, and z-index behavior remain intact.
• Existing tests remain green.
• A browser-level geometry regression test verifies trigger/menu alignment.

Investigation evidence

The pre-fix contract test failed with 2 failures and 224 passing tests. After moving the floating overlays outside the zoomed coordinate space, 226 tests passed. A browser geometry probe measured the trigger at 750px, the old zoomed-parent overlay at 937.5px, and the corrected overlay at 750px.

Non-goals

• Changing filter state management.
• Changing table column sizing or sidebar widths.
• Replacing Reka UI or Floating UI.
• Removing the application zoom feature.