facebook / facebook/astryx

Scope the 16px input floor to iOS, not every coarse pointer

Open
#6,015 1 comment 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.