fix(glitch): reclaim the EDIT tab's mobile layout - #283
Merged
Conversation
On a phone the EDIT tab's Chain row was cramped by the full-width Re-roll button, and the add-effect palette hid half its options behind a horizontal scroll. Three changes give the row its width back and surface the whole palette: - Re-roll collapses to its ⟳ icon on mobile (label returns from sm up), so it stops reserving ~90px on the Chain row. - The add-effect "+" chip matches that icon's 60×44 footprint on mobile so the two read as a matched pair, and shrinks back to a chip on desktop. - The "add effect" palette wraps instead of scrolling, so every Effect is visible at once on a phone. Co-Authored-By: Claude Opus 4.8 <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.
What
On a phone the GLITCH//Studio EDIT tab wasted horizontal space and hid options:
Changes
⟳glyph on mobile so it stops eating the Chain row's width; there-rolllabel returns fromsmup. Thearia-labelcarries the name at both sizes.+matches the icon. The add-effect+chip grows to the Re-roll icon's 60×44 footprint on mobile so the two read as a matched pair, and shrinks back to a chip fromsmup.overflow-x-auto→flex-wrap, so every Effect is visible at once on a phone. It's a set of options, not the ordered Chain, so surfacing all of them beats hiding half behind a scroll. Removed the now-obsoletemin-w-0(and its comment) that only existed to enable that scroll.Verification
Measured live in a real browser at mobile / desktop widths:
⟳icon, 60×44⟳ re-roll, 131px+chipPanel reserves
min-h-[240px]on mobile, so the wrapped palette (≤144px) fits with room to spare. Desktop layout is unchanged.npm run check— cleannpm run typecheck— clean@cyberdeck/glitchtests — 358 passing🤖 Generated with Claude Code