Repository navigation
Give text fields 16px text on phones so iOS does not zoom in - #40
Conversation
iOS Safari zooms the whole page when it focuses a text field whose text is smaller than 16px. Every text field on the site was 13-15.5px: the lab inputs, the quiz fill-ins and the command palette (code and UX item 30). Below 560px, text fields (including the labs' inputs, which have no type attribute) get 16px. The rule uses !important because chapter styles size their lab inputs with more specific selectors. narrow.spec.ts measures every lab input on six chapter pages at 390px, plus a field with the quiz's and the palette's classes. It fails at 15px without the rule. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Codex Review SummaryThis comment shows the latest Codex review activity on this pull request.
ℹ️ About Codex in GitHubYour team has set up Codex to review pull requests in this repo. Reviews are triggered when you
Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings. |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 5abd61d084
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| /* iOS Safari zooms the whole page when it focuses a text field whose text | ||
| is smaller than 16px. Phones get 16px in every text field; !important | ||
| because chapter styles size their lab inputs with more specific selectors. */ | ||
| @media (max-width: 560px) { |
There was a problem hiding this comment.
On iPhones held in landscape, the CSS viewport is commonly wider than 560px (for example, 844px), so this media query does not apply and the lab, quiz, and command-palette fields remain at 13–15.5px. Focusing them can therefore still trigger the iOS Safari zoom that this change is intended to prevent; target mobile/touch devices independently of narrow viewport width, and include a landscape viewport in the test.
Useful? React with 👍 / 👎.
Summary
Part of audit item 30 (code and UX), the last one still open. iOS Safari zooms the whole page when it focuses a text field whose text is smaller than 16px. Every text field on the site was 13–15.5px:
Below 560px, text fields get 16px. The selectors cover
inputwithout atypeattribute, because the labs' inputs have none. The rule uses!importantbecause chapter styles size their lab inputs with more specific selectors such as[data-ch="heap"] .hp-input.Test plan
narrow.spec.tsmeasures every lab input on the six chapter pages at 390px. It also measures a field with the quiz's and the palette's classes, since those fields appear only on their question or when the palette is open. Without the rule the check fails at 15px; with it, it passes.npm run typecheck,npm test(104 passed),npm run build,npx playwright test(56 passed).🤖 Generated with Claude Code