Scope the 16px input floor to iOS, not every coarse pointer
- Dominant language
- TypeScript
- Stars
- 13.1k
- Forks
- 1.1k
- Avg merge
- 1d 14h
- Merged PRs (30d)
- 669
Description
**Version**: `@astryxdesign/core` 0.5.2
## What happens
Text controls carry this rule:
```css
@media (pointer: coarse) {
… { font-size: max(1rem, var(--text-body-size)); } /* inputs, textareas, date/time fields… */
… { font-size: max(1rem, var(--text-label-size)); } /* Selector / ComplexSelector triggers, panel search */
}
```
I understand the intent: iOS Safari zooms the page when a focused input is under 16px, and the `max(1rem, …)` floor prevents that. The trigger, though, is `(pointer: coarse)`, which is true on a lot more than iPhones:
- Windows laptops with a touchscreen (Chrome flips to `pointer: coarse` / `hover: none` in tablet mode or after touch input) — controls grow to 16px while the rest of the UI stays at 14px, and fields visibly don't match their labels.
- Android phones and tablets, which never zoom on focus.
So the guard costs typography on every touch device to solve a problem that exists on one platform.
## Affected components (0.5.2)
Body-size floor: `TextInput`, `NumberInput`, `TextArea`, `DateInput` (incl. native and touch fields), `DateRangeInput`, `DateTimeInput`, `TimeInput`, `FileInput`, `Typeahead`, `ChatComposerInput`, `CommandPaletteInput`.
Label-size floor: `Selector`, `ComplexSelector`, `PanelSearchInput`.
Whatever the fix, it'd be good to apply it in one place so all of these move together.
## Suggestion
Either of these would keep the iOS protection and leave everyone else alone:
1. **Scope the floor to iOS.** `-webkit-touch-callout` is implemented only by iOS WebKit, so `@supports (-webkit-touch-callout: none)` nested inside the coarse-pointer query targets exactly the browsers that zoom.
2. **Make it a token.** e.g. `--input-min-font-size` defaulting to `1rem` under coarse pointers, so a theme can set it to `0` (or its own floor) without overriding component CSS.
Contributor guide
Research direction
Locate the shared coarse-pointer styling used by TextInput, NumberInput, TextArea, the date/time fields, Selector, ComplexSelector, and PanelSearchInput, then trace how their body-size and label-size floors are assembled. Compare the two proposed approaches and verify that the resulting rule preserves the iOS protection without changing typography on other coarse-pointer devices.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, typescript
- Domain
- design, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 58/100