Skip to content

fix(seeds): default form controls to 16px on mobile (prevent iOS zoom)#48

Merged
mattmaynes merged 3 commits into
mainfrom
fix/input-ios-zoom
Jul 14, 2026
Merged

fix(seeds): default form controls to 16px on mobile (prevent iOS zoom)#48
mattmaynes merged 3 commits into
mainfrom
fix/input-ios-zoom

Conversation

@mattmaynes

Copy link
Copy Markdown
Contributor

What

iOS Safari auto-zooms the page when a focused form control's font-size is under 16px. Input, Textarea, and the Select trigger all used text-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 the md breakpoint up (preserves desktop density). SelectItem/SelectLabel dropdown rows stay text-sm (not focusable, never zoom). One test per control locks text-base md:text-sm. Captured in docs/feedback/0017.

Verification

  • pnpm test (265 tests, +3 new), pnpm lint, pnpm build all green.

Fixes the bug at the design-system layer so consumers inherit it and drop their per-app overrides (rogueoak had a stopgap text-base on the subscribe inputs, to be removed once this ships).

🤖 Generated with Claude Code

https://claude.ai/code/session_01NYM2qa9QBSvQYBGP3pATQK

mattmaynes and others added 2 commits July 14, 2026 10:22
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 mattmaynes left a comment

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎨 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
@mattmaynes

Copy link
Copy Markdown
Contributor Author

Note: added a chore(format) commit running prettier --write on apps/storybook/src/Foundations.stories.tsx. That file had a pre-existing format:check failure on main (from #46) that fails CI repo-wide (prettier --check .) and would block this PR regardless. Formatting only, no logic change.

@mattmaynes mattmaynes merged commit 0103ed7 into main Jul 14, 2026
1 check passed
@mattmaynes mattmaynes deleted the fix/input-ios-zoom branch July 14, 2026 14:30
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant