fix(web): stop the zoom pill width jump when Reset appears - #32
Merged
PunGrumpy merged 1 commit intoAug 7, 2026
Merged
Conversation
The Reset button was conditionally mounted, so the floating zoom pill snapped wider and narrower every time zoom crossed 100%. The button now stays in the DOM inside a grid wrapper whose columns animate 0fr to 1fr (with an opacity fade), so the pill expands smoothly, collapses to zero width when idle, and the transition retargets mid-flight. While hidden the wrapper is inert, keeping the button out of the tab order and the accessibility tree; under reduced motion the safe-list snaps the width and keeps the fade. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
|
Contributor
|
React Doctor found no new issues. 🎉 Reviewed by React Doctor for commit |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
The interface review flagged (pre-existing, LOW) that the floating zoom pill snaps wider and narrower every time zoom crosses 100%, because the Reset button mounts and unmounts.
Root Cause
Conditional rendering removes the button's width from the pill instantly; the previous fix (#27) made the entrance interruptible but the layout change itself still jumped.
Solution
The button stays in the DOM inside a grid wrapper animating
grid-template-columnsbetween0frand1fr(the standard animate-to-auto-width technique), paired with an opacity fade — both interruptible transitions that retarget mid-flight. When collapsed the wrapper takes zero width, so no dead space is reserved, and it isinert, keeping the hidden button out of the tab order and the accessibility tree. Under reduced motion the safe-list from #24 snaps the width change and keeps the opacity fade.Result
The pill grows and shrinks smoothly instead of jumping; keyboard and screen-reader behavior is unchanged from the conditional-render version. Feel-check: zoom in/out across 100% repeatedly — the pill should never pop, and rapid crossings should retarget smoothly.
🤖 Generated with Claude Code