fix(ui): caret dropdown clipped by overflow:hidden ancestors#52
fix(ui): caret dropdown clipped by overflow:hidden ancestors#52schroldgames wants to merge 1 commit into
Conversation
The new-tab type menu (▾ caret next to +) was silently clipped by overflow:hidden on .surface-tab-bar, .pane-wrapper__content, and .split-child, making it appear that the button did nothing. Render the dropdown via createPortal at document.body with position:fixed + coordinates from getBoundingClientRect(), so it escapes all parent clipping contexts. The outside-click handler is updated to exclude the caret button itself, preventing the mousedown-then-click double-toggle flicker. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
|
I fixed and reworked the design in this PR: #38 |
|
Thanks @schroldgames — your diagnosis here is spot-on: three Closing as superseded, because we landed the exact same fix via a different PR: #38 (shipped in v0.8.8) renders the new-tab/Layout dropdowns through So the clipping bug is fixed in 0.8.8; your standalone targeted version would now conflict with the redesigned |
Fixes the bug documented in #34 (the dropdown is invisible due to clipping). This is a targeted fix without the broader toolbar redesign also proposed in that issue.
Root cause
The new-tab type menu (▾ caret next to +) renders
position: absolute; top: 30pxinside.surface-tab-bar, but three ancestor elements haveoverflow: hidden:.surface-tab-bar(28px tall — the menu immediately clips below it).pane-wrapper__content.split-childz-indexhas no effect onoverflow: hiddenclipping. The click and state toggle work correctly — the menu is just never visible.Fix
Render the dropdown via
createPortalatdocument.bodywithposition: fixed+ coordinates fromgetBoundingClientRect(). This escapes all parent clipping contexts entirely.The outside-click handler is also tightened to exclude the caret button itself, preventing a mousedown-then-click double-toggle flicker when dismissing the menu by clicking the caret again.
What this does not include
The SVG icon redesign and Layout split-button proposed in #34 are intentionally out of scope — those are a separate presentational change. This PR only fixes the clipping bug so the existing menu actually works.
🤖 Generated with Claude Code