The desktop/mobile consistency review found primary mobile controls
rendering below the ~44px comfortable touch floor. Address the genuinely
shared primitives in one pass:
- Add a --tap-min: 44px token (documented anchor for the floor).
- tokens.css: text inputs, selects, and submit buttons grow to --tap-min
under the 640px breakpoint (fixes the 36px auth/login form controls).
Scoped to form controls + type=submit so dense icon buttons aren't
inflated.
- SegmentedControl: .seg options reach the floor on mobile (it doubles as
the catalog sort toggle and the Library tab switcher).
- Chip: expand .chip-remove's tappable area to --tap-min via a centered
pseudo-element so the 16px glyph stays compact and tag rows don't grow.
Pure-CSS responsive change — jsdom can't evaluate @media or layout, so the
test pins the stylesheet contract (each shared primitive bumps to --tap-min
inside the mobile breakpoint), guarding against the bump being dropped.
The per-route .icon-btn (copy-pasted across seven files) is left for a
separate refactor.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
be493649af