Skip to content

Stop toolbar fan-out and folder panels from clipping their tooltips - #124

Merged
einari merged 2 commits into
mainfrom
fix/toolbar-panel-tooltip-clipping
Aug 11, 2026
Merged

Stop toolbar fan-out and folder panels from clipping their tooltips#124
einari merged 2 commits into
mainfrom
fix/toolbar-panel-tooltip-clipping

Conversation

@einari

@einari einari commented Aug 10, 2026

Copy link
Copy Markdown
Contributor

Fixed

  • Hover tooltips on the outermost buttons of a ToolbarFanOutItem panel are no longer clipped at the panel's edge. The clip-path that drives the reveal wipe is now released once the wipe has landed, and restored before the panel closes, so both animations keep their exact timing.
  • A ToolbarGroup that hosts a slot no longer clips the fan-out and folder panels of the buttons inside it — the slot section is only clipped while outgoing content is cross-fading out.

@einari einari added the patch label Aug 10, 2026
einari and others added 2 commits August 10, 2026 16:55
The reveal is a clip-path wipe, so the clip has to exist while it animates —
clip-path: none is discrete and snaps instead of interpolating. But clip-path
clips every descendant, so leaving a zero inset in place after the wipe has
landed slices off the hover tooltips of the outermost buttons, which paint
outside the panel by design.

Widening the settled inset is not a way out: the wipe front IS the inset
travelling 100% -> 0, so bleeding it outward extends the travel and the reveal
completes early (measured at ~95ms of a 350ms transition with a 32rem bleed).

Release the clip once the reveal has landed instead, and put an interpolable
inset back before a close begins, so both wipes keep their exact timing.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
.toolbar-slot-section was permanently overflow:hidden, which clipped the
fan-out and folder panels of any ToolbarGroup that hosts a slot. ToolbarLayout
already worked around this with an inline overflow override; move that to a
--transitioning modifier class so both hosts share it and the section is only
clipped while outgoing content is fading out.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
@einari
einari force-pushed the fix/toolbar-panel-tooltip-clipping branch from 17db2b7 to 9b7b674 Compare August 10, 2026 14:56
@einari
einari merged commit 49e7c26 into main Aug 11, 2026
5 checks passed
@einari
einari deleted the fix/toolbar-panel-tooltip-clipping branch August 11, 2026 04:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant