fix(studio): stop the grouping dialog opening off the bottom of the window

[vanceingalls]

Supersedes #3417, which was written on top of #3413–#3415 and went stale when those merged. Rebuilt on current main and — more importantly — rebuilt on main's own resolveFloatingPanelPosition rather than the second, parallel helper I had written. Please close #3417 in favour of this.

The bug

Reported as "the grouping button didn't work — I clicked it and nothing happened."

The dialog was opening. It positioned itself raw:

style={{ position: "fixed", left: anchorRect.left, top: anchorRect.bottom + 4 }}

No flip, no clamp. This button lives in a track header at the bottom of the studio window, so anchorRect.bottom + 4 puts the dialog past the viewport edge. It was the last floating surface in the timeline with no viewport handling at all — the FX popover beside it got its cap in #3413, and every portal got its tier in #3414.

The fix

It now goes through resolveFloatingPanelPosition — the helper RenderQueue and propertyPanelColor already position with — so it flips above the anchor when there is no room below and clamps so neither edge leaves the viewport.

GROUP_DIALOG_SIZE is a declared estimate in the same style as FORMAT_PANEL_SIZE and COLOR_PICKER_SIZE: w-56 is exact, only the flip decision reads the height, and the clamp keeps the dialog on screen either way.

Measured in the test: an anchor at top: 760 in a 768px-tall window previously produced top: 780px — 12px below the bottom edge. It now lands at top: 644px, fully inside the viewport (644 + 112 = 756, against a 756 limit).

Why it shipped

The existing group-pointer test passes with or without the fix. happy-dom reports an all-zero rect for an unlaid-out button, so the dialog landed at top: 4px — on screen, and nothing like the real app. A geometry test that never sets a geometry proves nothing.

The two new tests set a realistic anchor: one at the bottom edge, one hard against the right edge. Both verified to fail against the raw positioning and pass with the helper.

Deliberately not included

A toast for the grouping write's silent elements.length < 2 bail. The path is real in code — the button renders on clipCount > 1 while the write bails on resolved count — but I could not reach it from the UI: the offer only appears on a track with 2+ ungrouped clips, and sub-composition audio arrives as separate single-clip rows, so the button never renders there. Adding a message for a branch I cannot demonstrate, plus the file split it would force to stay under the 600-line studio cap, is not justified by the evidence I have.

Also worth recording from chasing this: I reproduced the environment on both the dev build and published 0.8.8 and could not reproduce a failing write. Clicking the real button groups the clips and updates the timeline. My first "reproduction" was my own test error — a text-match click that hit the paragraph rather than the button.

Checks

tsc --noEmit clean · full studio suite 4380 passed / 0 failed · oxlint 0/0 · oxfmt --check clean · fallow audit --base origin/main no issues (its one duplication finding is inherited) · both touched files well under the 600-line limit.

🤖 Generated with Claude Code

[miguel-heygen]

Exact-head review at 6babfb2019879f4448b89d2cdfaafaa7031b6a91.

The fix reuses the existing viewport contract instead of creating a second positioning path: TimelineFxButton.tsx:21-37 delegates centering, flip, and clamp to resolveFloatingPanelPosition, and :97-106 applies only the returned fixed coordinates to the portal. The new geometry witnesses at TimelineFxButton.test.tsx:77-99 set real bottom/right-edge rectangles, so both fail against the old raw positioning instead of passing on happy-dom zero geometry.

I re-ran the helper against the two test rectangles plus the missing left-edge case; outputs are {198,644,top}, {788,120,bottom}, and {12,24,bottom} respectively. Targeted oxlint and oxfmt are clean. All exact-head CI contexts are settled with no failures, including Test, Typecheck, both Windows jobs, preview parity, and CodeQL. The branch is five commits behind current main, but none touches the component, its tests, or the shared helper.

No blocker or important finding.

Verdict: APPROVE
Reasoning: The grouping dialog now uses the established viewport-aware positioning boundary, and realistic geometry tests pin both failure axes that made the control appear inert.

— Magi