From c9e6d7d93471d20b4723a23206b7ea6d79ad9b01 Mon Sep 17 00:00:00 2001 From: Raul Andrade Date: Mon, 27 Jul 2026 22:26:15 -0300 Subject: [PATCH] fix(glitch): reclaim the EDIT tab's mobile layout MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- .changeset/reroll-icon-mobile.md | 9 +++++++++ apps/glitch/src/components/chain-editor.tsx | 21 ++++++++++++--------- 2 files changed, 21 insertions(+), 9 deletions(-) create mode 100644 .changeset/reroll-icon-mobile.md diff --git a/.changeset/reroll-icon-mobile.md b/.changeset/reroll-icon-mobile.md new file mode 100644 index 0000000..3e3f561 --- /dev/null +++ b/.changeset/reroll-icon-mobile.md @@ -0,0 +1,9 @@ +--- +'@cyberdeck/glitch': patch +--- + +The EDIT tab's mobile layout reclaims its cramped Chain row and surfaces the whole palette: + +- Re-roll collapses to its ⟳ icon on mobile so it stops reserving ~90px on the Chain row; the "re-roll" label returns from `sm` up. +- The add-effect "+" chip grows to match 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 horizontally, so every Effect is visible at once on a phone rather than hidden behind a scroll. diff --git a/apps/glitch/src/components/chain-editor.tsx b/apps/glitch/src/components/chain-editor.tsx index 3dc5c34..df2cccd 100644 --- a/apps/glitch/src/components/chain-editor.tsx +++ b/apps/glitch/src/components/chain-editor.tsx @@ -373,18 +373,16 @@ export default function ChainEditor({ chain, actions, onReroll }: Props) { ) : ( - // min-w-0 defeats the UA fieldset's `min-inline-size: min-content`: without it the - // fieldset refuses to shrink below the palette chips' combined width and overflows the - // viewport on mobile instead of letting its row scroll (the chain row below wins the same - // fight with flex-1 min-w-0). -
+
{/* The palette reads EFFECT_ORDER (presets.ts) — the canonical order the Presets share — rather than the registry's incidental key order. That list is hand-kept: a new - Effect must be added there to reach the palette, and the compiler won't point at it. */} -
+ Effect must be added there to reach the palette, and the compiler won't point at it. + It wraps rather than scrolls: it's a set of options, not the ordered Chain, so showing + every Effect at once beats hiding half behind a horizontal scroll. */} +
{EFFECT_ORDER.map((type) => ( ))} + {/* On mobile it matches the Re-roll icon's 60px footprint so the two read as a pair; from + sm up it shrinks back to a chip as Re-roll regains its label. */} setFocus({ kind: 'palette' })} aria-label="add effect" - className="shrink-0" + className="shrink-0 w-[60px] justify-center sm:w-auto sm:justify-start" > +
{/* The Seed sits outside the Chain, so its control sits outside the Link row rather than becoming a seventh chip that looks like part of the look. */} + {/* Icon-only on mobile so it stops eating the Chain row's width; the label returns from sm up. + The aria-label carries the name at both sizes, so the glyph and text are decorative. */}