fix(seeds): default form controls to 16px on mobile (prevent iOS zoom)#48
Conversation
iOS Safari auto-zooms the page when a focused form control's font-size is below 16px. Input, Textarea, and the Select trigger all used text-sm (14px), so every consumer hit this on phones. Set them to `text-base md:text-sm`: 16px on mobile (no zoom), 14px from md up (keeps the denser desktop typography). Dropdown items stay text-sm - they are not focusable fields. Adds a test per control; captured in docs/feedback/0017. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01NYM2qa9QBSvQYBGP3pATQK
…k 0017) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01NYM2qa9QBSvQYBGP3pATQK
mattmaynes
left a comment
There was a problem hiding this comment.
🎨 Spectra Designer - approve
Typography and density check out. The three focusable field controls (Input, Textarea, Select trigger) now share one consistent text-base md:text-sm token pair, and the md: responsive pattern already exists across other seeds (Avatar, Button, Keyboard, Spinner), so the breakpoint choice is in-house-consistent, not a one-off.
Density on the tightest control holds: Input sm is h-8 (32px); text-base (16px) carries a 24px line-height, which sits inside 32px with ~4px slack top and bottom - no overflow, no crowding. Coverage is complete: Input, Textarea, and the Select trigger are the full set of text-entry/combobox controls, and all Input size variants inherit the shared base. Checkbox/Radio/Switch/Button are focusable but aren't text fields, so iOS zoom never applied - correctly left alone. SelectItem and SelectLabel stay text-sm (non-focusable dropdown rows keep their 14px density).
Nothing material open in the designer facet.
Pre-existing format:check failure on main (from PR #46), unrelated to the seeds change but blocks CI repo-wide (prettier --check .). Formatting only, no logic change. Folded in to unblock the release. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01NYM2qa9QBSvQYBGP3pATQK
|
Note: added a |
What
iOS Safari auto-zooms the page when a focused form control's font-size is under 16px.
Input,Textarea, and theSelecttrigger all usedtext-sm(14px), so every canopy consumer hit this on phones (surfaced on rogueoak.com - rogueoak feedback 0002).Fix
Set the three focusable field controls to
text-base md:text-sm- 16px on mobile (no zoom), 14px from themdbreakpoint up (preserves desktop density).SelectItem/SelectLabeldropdown rows staytext-sm(not focusable, never zoom). One test per control lockstext-base md:text-sm. Captured indocs/feedback/0017.Verification
pnpm test(265 tests, +3 new),pnpm lint,pnpm buildall green.Fixes the bug at the design-system layer so consumers inherit it and drop their per-app overrides (rogueoak had a stopgap
text-baseon the subscribe inputs, to be removed once this ships).🤖 Generated with Claude Code
https://claude.ai/code/session_01NYM2qa9QBSvQYBGP3pATQK