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. */}