fix(ui): set input font-size to 16px to prevent iOS Safari auto-zoom on focus#64673
fix(ui): set input font-size to 16px to prevent iOS Safari auto-zoom on focus#64673NianJiuZst wants to merge 1 commit into
Conversation
Greptile SummaryThis PR sets Confidence Score: 5/5Safe to merge; the only finding is a misplaced stylelint suppression comment that has no effect on runtime CSS behaviour. All findings are P2. The CSS fix itself is correct, the visual change is intentional and minimal, and the misplaced stylelint comment does not affect how the browser renders the page. layout.css — the Prompt To Fix All With AIThis is a comment left during a code review.
Path: ui/src/styles/chat/layout.css
Line: 362-364
Comment:
**Misplaced stylelint suppression comment**
The `stylelint-disable-next-line declaration-property-allowed-list` comment is positioned outside and after the closing `}` of the `.chat-compose .chat-compose__field textarea` rule — so it will target the next selector (`.chat-compose__field textarea:disabled`) rather than the `font-size: 16px` declaration inside the preceding rule. The suppression doesn't apply to the line it was intended to cover.
If the project's stylelint config has a `declaration-property-allowed-list` that restricts `font-size`, the actual violation is on line 358 and this disable comment won't suppress it. Move the comment inside the rule block, immediately before the `font-size` declaration:
```suggestion
.chat-compose .chat-compose__field textarea {
/* ... other declarations ... */
/* iOS Safari zoom prevention: inputs < 16px trigger auto-zoom on focus */
/* stylelint-disable-next-line declaration-property-allowed-list */
font-size: 16px;
line-height: 1.45;
}
.chat-compose__field textarea:disabled {
```
(The informational comment and the suppress directive should sit directly before `font-size: 16px` inside the rule, not after its closing brace.)
How can I resolve this? If you propose a fix, please make it concise.Reviews (1): Last reviewed commit: "fix(ui): set form input font-size to 16p..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
|
Codex review: needs real behavior proof before merge. Summary Reproducibility: yes. for source-level reproduction: the linked issue has concrete iPhone Safari steps and real-device confirmation, and current main still styles the active composer below 16px. I did not run a live iOS Safari session in this read-only review. Real behavior proof Next step before merge Security Review findings
Review detailsBest possible solution: Land a rebased CSS-only fix that targets Do we have a high-confidence way to reproduce the issue? Yes, for source-level reproduction: the linked issue has concrete iPhone Safari steps and real-device confirmation, and current main still styles the active composer below 16px. I did not run a live iOS Safari session in this read-only review. Is this the best way to solve the issue? No, not as currently patched. The 16px touch-primary CSS direction is maintainable, but the PR must target the current composer selector and include after-fix real behavior proof before merge. Full review comments:
Overall correctness: patch is incorrect What I checked:
Likely related people:
Remaining risk / open question:
Codex review notes: model gpt-5.5, reasoning high; reviewed against 266e72149b7f. |
928323e to
67dd20d
Compare
|
ProjectClownfish pushed a narrow repair to this branch so the original contributor path can stay canonical. Source PR: #64673 |
vincentkoc
added
clownfish:human-review
clawsweeper
67dd20d to
e88518b
Compare
e0b2524 to
f3eb054
Compare
63d5f94 to
84eea16
Compare
84eea16 to
b4fc874
Compare
|
This assigned pull request has been automatically marked as stale after being open for 27 days. |
openclaw-barnacle
Bot
added
stale
|
This assigned pull request has been automatically marked as stale after being open for 27 days. |
openclaw-barnacle
Bot
added
stale
|
This assigned pull request has been automatically marked as stale after being open for 27 days. |
openclaw-barnacle
Bot
added
stale
|
This assigned pull request has been automatically marked as stale after being open for 27 days. |
|
Closing this as superseded by #81639. Reason: this branch is now merge-conflicting and had repeated failed real-behavior proof checks, while #81639 carries the same narrow Control UI iOS input-zoom fix forward on current Replacement proof on #81639:
Thanks for the original report and patch direction; the replacement PR keeps that path credited while giving maintainers a clean branch to land. |
Fixes #64651. Supersedes #64673. Keeps shared form, config, and usage Control UI text-entry controls at 16px on touch-primary devices while preserving chat composer input sizing, so iOS Safari no longer auto-zooms focused fields. Verification: - pnpm exec oxfmt --check --threads=1 CHANGELOG.md ui/src/styles/components.css ui/src/styles/config.css ui/src/styles/usage.css ui/src/styles/chat/layout.test.ts ui/src/styles/components.test.ts ui/src/styles/config.test.ts ui/src/styles/usage.test.ts - git diff --check - pnpm test ui/src/styles/chat/layout.test.ts ui/src/styles/components.test.ts ui/src/styles/config.test.ts ui/src/styles/usage.test.ts - pnpm check:changed - Playwright WebKit iPhone 12 computed-style proof for all targeted controls at 16px - GitHub Real behavior proof, CI, and workflow sanity on exact PR head fa0d44a
Fixes openclaw#64651. Supersedes openclaw#64673. Keeps shared form, config, and usage Control UI text-entry controls at 16px on touch-primary devices while preserving chat composer input sizing, so iOS Safari no longer auto-zooms focused fields. Verification: - pnpm exec oxfmt --check --threads=1 CHANGELOG.md ui/src/styles/components.css ui/src/styles/config.css ui/src/styles/usage.css ui/src/styles/chat/layout.test.ts ui/src/styles/components.test.ts ui/src/styles/config.test.ts ui/src/styles/usage.test.ts - git diff --check - pnpm test ui/src/styles/chat/layout.test.ts ui/src/styles/components.test.ts ui/src/styles/config.test.ts ui/src/styles/usage.test.ts - pnpm check:changed - Playwright WebKit iPhone 12 computed-style proof for all targeted controls at 16px - GitHub Real behavior proof, CI, and workflow sanity on exact PR head fa0d44a
Fixes openclaw#64651. Supersedes openclaw#64673. Keeps shared form, config, and usage Control UI text-entry controls at 16px on touch-primary devices while preserving chat composer input sizing, so iOS Safari no longer auto-zooms focused fields. Verification: - pnpm exec oxfmt --check --threads=1 CHANGELOG.md ui/src/styles/components.css ui/src/styles/config.css ui/src/styles/usage.css ui/src/styles/chat/layout.test.ts ui/src/styles/components.test.ts ui/src/styles/config.test.ts ui/src/styles/usage.test.ts - git diff --check - pnpm test ui/src/styles/chat/layout.test.ts ui/src/styles/components.test.ts ui/src/styles/config.test.ts ui/src/styles/usage.test.ts - pnpm check:changed - Playwright WebKit iPhone 12 computed-style proof for all targeted controls at 16px - GitHub Real behavior proof, CI, and workflow sanity on exact PR head fa0d44a
Fixes openclaw#64651. Supersedes openclaw#64673. Keeps shared form, config, and usage Control UI text-entry controls at 16px on touch-primary devices while preserving chat composer input sizing, so iOS Safari no longer auto-zooms focused fields. Verification: - pnpm exec oxfmt --check --threads=1 CHANGELOG.md ui/src/styles/components.css ui/src/styles/config.css ui/src/styles/usage.css ui/src/styles/chat/layout.test.ts ui/src/styles/components.test.ts ui/src/styles/config.test.ts ui/src/styles/usage.test.ts - git diff --check - pnpm test ui/src/styles/chat/layout.test.ts ui/src/styles/components.test.ts ui/src/styles/config.test.ts ui/src/styles/usage.test.ts - pnpm check:changed - Playwright WebKit iPhone 12 computed-style proof for all targeted controls at 16px - GitHub Real behavior proof, CI, and workflow sanity on exact PR head fa0d44a
3 participants
Summary
On iPhone/iOS Safari, the OpenClaw Control UI chat input and other text inputs render below the iOS 16px threshold, so Safari auto-zooms the page every time the user focuses a field.
This makes the Control UI feel broken as an iOS home screen web app — typing in the chat box repeatedly zooms the interface in and out.
Changes
Set
font-size: 16pxon all interactive text inputs to match the iOS Safari threshold:ui/src/styles/chat/layout.css:.chat-compose .chat-compose__field textarea:14px→16px.agent-chat__input > textarea:0.92rem(≈13px) →16pxui/src/styles/components.css:.field input, .field textarea, .field select: addedfont-size: 16pxWhy 16px
iOS Safari uses a 16px font-size threshold — inputs smaller than 16px trigger auto-zoom on focus. This is browser behavior and cannot be overridden with JavaScript; only CSS font-size changes prevent it.
Testing
Fixes #64651