feat(glitch): let Randomize collapse to its glyph on mobile, beside Re-roll - #293
Merged
Merged
Conversation
…e-roll Randomize was the only Strip control still spending the chip row's width on a label at every size. It now reads as the pair Re-roll already established: the glyph alone below sm, the label back from sm up, and the label as the accessible name at both — so neither the glyph nor the visible text is ever the only carrier of the name. That made the collapse markup a byte-identical copy across two callers, which is the repo's own bar for extraction, so it becomes IconLabelButton — app-local rather than kit-bound, since the breakpoint is this Strip's width problem. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
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.
Randomize was the only Strip control still spending the chip row's width on a label at every size.
It now reads as the pair Re-roll already established: the glyph alone below
sm, the label backfrom
smup, and the label as the accessible name at both — so neither the glyph nor the visibletext is ever the only carrier of the name.
That made the collapse markup a byte-identical copy across two callers, which is the repo's own bar
for extraction, so it becomes
IconLabelButton. It stayed app-local rather than crossing into thekit: the breakpoint is this Strip's width problem, not the kit's.
What changed
src/components/icon-label-button.tsx— new, with the rationale in one place instead of copiedinto two call sites
preset-picker.tsx(Randomize) andchain-editor.tsx(Re-roll) become its two callers; Re-roll'srendered output is unchanged
app.test.tsx's five/randomize/iqueries become the exact name'randomize', matching thepattern Re-roll's queries already used — without the
aria-labelthe name would be"⚄ randomize"and they now fail, where before they passed either wayicon-label-button.test.tsxpins the three things the collapse can break: the name is the labelalone, the glyph stays out of the accessibility tree, the label rides the element that collapses
Verification
Driven in Chrome for Testing at three widths with a Source Image loaded, per the app's verify skill:
hasTouch)⚄— 59×44⟳— 60×44randomizesmexactly)⚄ randomize— 147×44⟳ re-roll— 131×44randomize⚄ randomize— 147×44⟳ re-roll— 131×44randomizeTapped with a real touch gesture (
page.touchscreen.tap, not a synthetic click) on the mobileviewport: the active Preset cleared
VAPORWAVE → noneand the canvas pixels changed. The 44pxfloor holds at every width.
🤖 Generated with Claude Code