fix(ui): meet 44px touch-target floor on shared mobile primitives
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>
This commit is contained in:
@@ -78,6 +78,12 @@
|
||||
--bp-md: 768px;
|
||||
--bp-lg: 1024px;
|
||||
|
||||
/* Comfortable touch-target floor for primary controls on phones.
|
||||
Controls compact to their desktop height by default and grow to
|
||||
this minimum under the 640px breakpoint. See touch-targets.test.ts
|
||||
for the shared-primitive contract. */
|
||||
--tap-min: 44px;
|
||||
|
||||
/* Safe-area helpers for notched / home-indicator devices. Resolve
|
||||
to 0 on devices without insets, so they're safe everywhere as
|
||||
long as <meta name="viewport" content="…, viewport-fit=cover">
|
||||
@@ -293,6 +299,23 @@ img {
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* Touch-target floor on phones. Form controls and submit buttons keep
|
||||
their compact 36px desktop height above the breakpoint but grow to a
|
||||
comfortable tap size here. `min-height` (not `height`) so the
|
||||
already-tall textarea is unaffected. Scoped to text fields, selects,
|
||||
and `type=submit` deliberately — bare `button` would also catch dense
|
||||
icon buttons (chip remove, segmented options, reader chrome) that meet
|
||||
the floor through their own hit-area rules instead. */
|
||||
input[type='text'],
|
||||
input[type='search'],
|
||||
input[type='password'],
|
||||
input[type='number'],
|
||||
input[type='email'],
|
||||
select,
|
||||
button[type='submit'] {
|
||||
min-height: var(--tap-min);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
|
||||
Reference in New Issue
Block a user