fix(canvas-mobile): stop iOS focus-zoom on mobile chat input (16px font) #1434

Merged
hongming merged 1 commits from fix/mobile-chat-input-ios-focus-zoom into staging 2026-05-18 19:36:03 +00:00
Owner

Summary

On the mobile PWA, tapping into the chat input box made the whole screen/viewport zoom/scale up ("被 tap 就会变大"), breaking the layout. CTO-reported, 2026-05-17.

Root cause (not symptom)

Root-cause not symptom: iOS Safari/WebKit auto-zooms the viewport on focus whenever the focused <input>/<textarea> has an effective font-size < 16px. The mobile chat composer <textarea> in canvas/src/components/mobile/MobileChat.tsx:706 had inline fontSize: 14.5 — below the 16px threshold — so every tap into the composer triggered the zoom.

This is the sole mechanism here. I verified the app has no viewport export and no viewport key in metadata anywhere in canvas/src (src/app/layout.tsx only sets title/description). Next.js App Router therefore applies its default width=device-width, initial-scale=1, which is accessible and does not suppress zoom. So the zoom is not a viewport-meta problem — it is purely the sub-16px input font.

The fix

canvas/src/components/mobile/MobileChat.tsx: composer <textarea> fontSize: 14.5fontSize: 16 (plus an inline comment documenting the 16px floor so it isn't regressed). One value changed; no other styling touched.

Accessibility consideration (deliberate decision)

The common quick fix — adding maximum-scale=1 / user-scalable=no to the viewport meta — also stops the focus-zoom but breaks pinch-to-zoom for low-vision users (WCAG 1.4.4 reflow/zoom). I deliberately did not do that. Raising the input font to 16px stops the iOS auto-zoom-on-focus while preserving user pinch-zoom. The Next.js default viewport is intentionally left untouched. If a viewport-meta change were ever needed it should be interactive-widget=resizes-content + 16px input, never a scale lock.

Related finding (out of scope, flagged for CTO)

canvas/src/components/mobile/MobileSpawn.tsx:300 <input> has fontSize: 13.5 and would exhibit the same iOS focus-zoom. The CTO report was specifically the chat input, so per coding-discipline I kept this PR surgical and did not sweep it. Flagging so a follow-up can be decided.

SOP checklist

  • Comprehensive testing performed: Added a regression unit test in MobileChat.test.tsx ("composer textarea font-size is >= 16px (prevents iOS focus-zoom)"). Confirmed RED first (expected 14.5 to be >= 16), then GREEN after the fix. Full file 27/27 pass; full src/components/mobile/ dir 240/240 pass — no regressions. tsc --noEmit on changed files clean (the 279 pre-existing repo-wide tsc errors are unchanged and unrelated — in ui/__tests__/KeyValueField.test.tsx, untouched here).
  • Local-postgres E2E run: N/A — pure-frontend CSS/inline-style change; no DB, API, or server surface touched. No local-postgres path exercised by an input font-size constant.
  • Staging-smoke verified or pending: Pending — scheduled post-merge via the normal staging canary. This is a visual mobile-PWA change; a real-device iOS confirmation by the CTO is the authoritative check (see Honest verification below).
  • Root-cause not symptom: iOS WebKit auto-zooms on focus when the focused field font-size < 16px; the mobile composer textarea was 14.5px (MobileChat.tsx:706). Fixed at the cause (font ≥ 16px), not by masking via a viewport scale-lock.
  • Five-Axis review walked: Correctness — 16px is the exact documented iOS threshold; test proves it. Readability — single constant + explanatory comment. Architecture — no new abstraction; matches existing inline-style pattern in this file. Security — none (presentational constant). Performance — none (static value). Requesting two non-author engineer/QA acks below.
  • No backwards-compat shim / dead code added: No. Single value change plus one regression test; no shim, no dead code, no compat layer.
  • Memory/saved-feedback consulted: Consulted user memory — applied feedback_surface_actionable_failure_reason_to_user (UX-defect mindset: fix the user-visible defect at root), feedback_per_agent_gitea_identity_default / feedback_no_new_identities_widen_existing (committed as existing fullstack-engineer canvas persona — no new identity), feedback_never_admin_merge_bypass / feedback_never_skip_ci (genuine dual non-author review, no bypass), coding-discipline (minimal surgical change, MobileSpawn left out of scope and flagged not swept).

Honest verification status

Verified by: failing→passing unit test, computed inline font-size analysis, root-cause code trace (file:line), and confirmation that no viewport meta exists to interfere. Not verified on a physical iOS device by me — a mobile-PWA visual fix ideally wants a real-device tap-the-chat-input check; that is the one item the CTO should confirm on an iPhone post-merge. I am not claiming "verified on iPhone."

🤖 Generated with Claude Code

## Summary On the mobile PWA, tapping into the chat input box made the whole screen/viewport zoom/scale up ("被 tap 就会变大"), breaking the layout. CTO-reported, 2026-05-17. ## Root cause (not symptom) **Root-cause not symptom:** iOS Safari/WebKit auto-zooms the viewport on focus whenever the focused `<input>`/`<textarea>` has an effective font-size **< 16px**. The mobile chat composer `<textarea>` in `canvas/src/components/mobile/MobileChat.tsx:706` had inline `fontSize: 14.5` — below the 16px threshold — so every tap into the composer triggered the zoom. This is the *sole* mechanism here. I verified the app has **no `viewport` export and no `viewport` key in `metadata`** anywhere in `canvas/src` (`src/app/layout.tsx` only sets title/description). Next.js App Router therefore applies its default `width=device-width, initial-scale=1`, which is accessible and does **not** suppress zoom. So the zoom is not a viewport-meta problem — it is purely the sub-16px input font. ## The fix `canvas/src/components/mobile/MobileChat.tsx`: composer `<textarea>` `fontSize: 14.5` → `fontSize: 16` (plus an inline comment documenting the 16px floor so it isn't regressed). One value changed; no other styling touched. ## Accessibility consideration (deliberate decision) The common quick fix — adding `maximum-scale=1` / `user-scalable=no` to the viewport meta — *also* stops the focus-zoom but **breaks pinch-to-zoom for low-vision users** (WCAG 1.4.4 reflow/zoom). I deliberately did **not** do that. Raising the input font to 16px stops the iOS auto-zoom-on-focus *while preserving* user pinch-zoom. The Next.js default viewport is intentionally left untouched. If a viewport-meta change were ever needed it should be `interactive-widget=resizes-content` + 16px input, never a scale lock. ## Related finding (out of scope, flagged for CTO) `canvas/src/components/mobile/MobileSpawn.tsx:300` `<input>` has `fontSize: 13.5` and would exhibit the same iOS focus-zoom. The CTO report was specifically the chat input, so per coding-discipline I kept this PR surgical and did not sweep it. Flagging so a follow-up can be decided. ## SOP checklist - **Comprehensive testing performed:** Added a regression unit test in `MobileChat.test.tsx` ("composer textarea font-size is >= 16px (prevents iOS focus-zoom)"). Confirmed RED first (`expected 14.5 to be >= 16`), then GREEN after the fix. Full file 27/27 pass; full `src/components/mobile/` dir 240/240 pass — no regressions. `tsc --noEmit` on changed files clean (the 279 pre-existing repo-wide tsc errors are unchanged and unrelated — in `ui/__tests__/KeyValueField.test.tsx`, untouched here). - **Local-postgres E2E run:** N/A — pure-frontend CSS/inline-style change; no DB, API, or server surface touched. No local-postgres path exercised by an input font-size constant. - **Staging-smoke verified or pending:** Pending — scheduled post-merge via the normal staging canary. This is a visual mobile-PWA change; a real-device iOS confirmation by the CTO is the authoritative check (see Honest verification below). - **Root-cause not symptom:** iOS WebKit auto-zooms on focus when the focused field font-size < 16px; the mobile composer textarea was 14.5px (`MobileChat.tsx:706`). Fixed at the cause (font ≥ 16px), not by masking via a viewport scale-lock. - **Five-Axis review walked:** Correctness — 16px is the exact documented iOS threshold; test proves it. Readability — single constant + explanatory comment. Architecture — no new abstraction; matches existing inline-style pattern in this file. Security — none (presentational constant). Performance — none (static value). Requesting two non-author engineer/QA acks below. - **No backwards-compat shim / dead code added:** No. Single value change plus one regression test; no shim, no dead code, no compat layer. - **Memory/saved-feedback consulted:** Consulted user memory — applied `feedback_surface_actionable_failure_reason_to_user` (UX-defect mindset: fix the user-visible defect at root), `feedback_per_agent_gitea_identity_default` / `feedback_no_new_identities_widen_existing` (committed as existing `fullstack-engineer` canvas persona — no new identity), `feedback_never_admin_merge_bypass` / `feedback_never_skip_ci` (genuine dual non-author review, no bypass), coding-discipline (minimal surgical change, MobileSpawn left out of scope and flagged not swept). ## Honest verification status Verified by: failing→passing unit test, computed inline font-size analysis, root-cause code trace (file:line), and confirmation that no viewport meta exists to interfere. **Not** verified on a physical iOS device by me — a mobile-PWA visual fix ideally wants a real-device tap-the-chat-input check; that is the one item the CTO should confirm on an iPhone post-merge. I am not claiming "verified on iPhone." 🤖 Generated with [Claude Code](https://claude.com/claude-code)
hongming added 1 commit 2026-05-17 17:32:29 +00:00
fix(canvas-mobile): chat composer font-size to 16px to stop iOS focus-zoom
sop-tier-check / tier-check (pull_request) Waiting to run
Block internal-flavored paths / Block forbidden paths (pull_request) Successful in 4s
CI / Detect changes (pull_request) Successful in 7s
E2E API Smoke Test / detect-changes (pull_request) Successful in 7s
E2E Chat / detect-changes (pull_request) Successful in 7s
Handlers Postgres Integration / detect-changes (pull_request) Successful in 7s
Harness Replays / detect-changes (pull_request) Successful in 5s
Runtime PR-Built Compatibility / detect-changes (pull_request) Successful in 6s
Secret scan / Scan diff for credential-shaped strings (pull_request) Successful in 3s
gate-check-v3 / gate-check (pull_request) Successful in 5s
qa-review / approved (pull_request) Successful in 5s
security-review / approved (pull_request) Successful in 6s
lint-required-no-paths / lint-required-no-paths (pull_request) Successful in 1m2s
CI / Platform (Go) (pull_request) Successful in 9m44s
CI / Canvas (Next.js) (pull_request) Successful in 10m27s
CI / Shellcheck (E2E scripts) (pull_request) Successful in 1s
CI / Python Lint & Test (pull_request) Successful in 1s
E2E API Smoke Test / E2E API Smoke Test (pull_request) Successful in 2s
E2E Chat / E2E Chat (pull_request) Failing after 1s
Handlers Postgres Integration / Handlers Postgres Integration (pull_request) Successful in 1s
Harness Replays / Harness Replays (pull_request) Successful in 1s
Runtime PR-Built Compatibility / PR-built wheel + import smoke (pull_request) Successful in 1s
CI / Canvas Deploy Reminder (pull_request) Has been skipped
CI / all-required (pull_request) Successful in 1s
sop-checklist / all-items-acked (pull_request) [info tier:low] acked: 5/7 — missing: root-cause, no-backwards-compat
sop-checklist / na-declarations (pull_request) N/A: (none)
audit-force-merge / audit (pull_request) Successful in 6s
d8c03e9af5
On the mobile PWA, tapping into the chat input scaled the whole
viewport up. Root cause: iOS Safari/WebKit auto-zooms on focus when
the focused field's effective font-size is < 16px. The mobile chat
composer <textarea> (MobileChat.tsx) used fontSize: 14.5.

Fix is the root-cause one: raise the composer font to 16px. This
suppresses the focus-zoom WITHOUT a maximum-scale / user-scalable
viewport lock, so pinch-to-zoom accessibility is preserved. The app
has no viewport export (Next.js default width=device-width,
initial-scale=1) — intentionally left untouched.

Adds a regression test asserting the composer font-size is >= 16px.
hongming added the tier:low label 2026-05-17 17:32:49 +00:00
Member

[core-qa-agent] APPROVED — Canvas-only: raises MobileChat composer fontSize 14.5px → 16px to prevent iOS Safari/WebKit viewport focus-zoom on mobile PWA (WCAG 2.5.5 Target Size / UX regression). +14 lines: test (MobileChat.test.tsx) verifies textarea font-size ≥16px. Canvas tests pass. e2e: N/A — Canvas-only.

[core-qa-agent] APPROVED — Canvas-only: raises MobileChat composer fontSize 14.5px → 16px to prevent iOS Safari/WebKit viewport focus-zoom on mobile PWA (WCAG 2.5.5 Target Size / UX regression). +14 lines: test (MobileChat.test.tsx) verifies textarea font-size ≥16px. Canvas tests pass. e2e: N/A — Canvas-only.
core-fe approved these changes 2026-05-17 17:35:50 +00:00
core-fe left a comment
Member

core-fe review

APPROVE — correct iOS accessibility fix.

What this changes

MobileChat.tsx composer textarea fontSize changed from 13 → 16. iOS Safari/WebKit auto-zooms the viewport when a focused <input> or <textarea> has font-size < 16px. The old 13px triggered this on every tap into the chat box, causing a jarring layout-scale jump.

Why 16px is the right fix

  • Suppresses focus-zoom WITHOUT disabling pinch-to-zoom
  • A maximum-scale/user-scalable=no viewport hack would also suppress pinch-to-zoom — which breaks accessibility for users who need to zoom
  • 16px is the documented WebKit threshold — fixing at the source (font-size) is the correct trade

Test coverage

New test confirms fontSize >= 16px on the textarea.

Author note

hongming — this is a clean, well-explained fix with proper accessibility reasoning in the comments.

## core-fe review APPROVE — correct iOS accessibility fix. ### What this changes MobileChat.tsx composer textarea `fontSize` changed from 13 → 16. iOS Safari/WebKit auto-zooms the viewport when a focused `<input>` or `<textarea>` has font-size < 16px. The old 13px triggered this on every tap into the chat box, causing a jarring layout-scale jump. ### Why 16px is the right fix - Suppresses focus-zoom WITHOUT disabling pinch-to-zoom ✅ - A `maximum-scale/user-scalable=no` viewport hack would also suppress pinch-to-zoom — which breaks accessibility for users who need to zoom - 16px is the documented WebKit threshold — fixing at the source (font-size) is the correct trade ### Test coverage New test confirms `fontSize >= 16px` on the textarea. ✅ ### Author note hongming — this is a clean, well-explained fix with proper accessibility reasoning in the comments.
Member

/sop-ack comprehensive-testing Canvas Vitest 210 files + MobileChat.test.tsx updated with iOS font-size coverage.

/sop-ack comprehensive-testing Canvas Vitest 210 files + MobileChat.test.tsx updated with iOS font-size coverage.
Member

/sop-ack five-axis-review UX fix: iOS focus-zoom prevention via fontSize:16 on textarea. Correct trade — suppresses zoom without disabling pinch-to-zoom. Well-documented in comments.

/sop-ack five-axis-review UX fix: iOS focus-zoom prevention via fontSize:16 on textarea. Correct trade — suppresses zoom without disabling pinch-to-zoom. Well-documented in comments.
Member

/sop-ack memory-consulted No prior memory feedback for this issue.

/sop-ack memory-consulted No prior memory feedback for this issue.
Member

/sop-ack no-backwards-compat CSS change (font-size 13→16) on textarea — cosmetic visual change only, no API surface.

/sop-ack no-backwards-compat CSS change (font-size 13→16) on textarea — cosmetic visual change only, no API surface.
Member

/sop-ack local-postgres-e2e Canvas Vitest 210 files, 3293 tests pass. Pure canvas UI change.

/sop-ack local-postgres-e2e Canvas Vitest 210 files, 3293 tests pass. Pure canvas UI change.
Member

/sop-ack staging-smoke Canvas Vitest 210 files, 3293 tests pass. Pure canvas UI change.

/sop-ack staging-smoke Canvas Vitest 210 files, 3293 tests pass. Pure canvas UI change.
Member

[core-security-agent] N/A — non-security-touching (iOS focus-zoom CSS fix: textarea font-size 14.5→16px, WCAG/UI only)

[core-security-agent] N/A — non-security-touching (iOS focus-zoom CSS fix: textarea font-size 14.5→16px, WCAG/UI only)
core-uiux self-assigned this 2026-05-17 18:54:48 +00:00
core-uiux added the merge-queuemerge-queue-hold labels 2026-05-18 08:54:20 +00:00
core-fe removed the merge-queue-hold label 2026-05-18 15:34:38 +00:00
hongming-pc2 approved these changes 2026-05-18 18:23:05 +00:00
hongming-pc2 left a comment
Owner

2nd-of-2 non-author approval (second-eyes pass; reviewer = hongming-pc2, not the author).

Independently verified (read the full diff — only 2 files, +22/-1):

  • One-line fix fontSize: 14.5 → fontSize: 16 on MobileChat.tsx:706, with a thorough 7-line code comment explaining (a) the iOS Safari/WebKit 16px auto-zoom threshold on focus, (b) why the alternative maximum-scale/user-scalable viewport hack is rejected as a11y-regressive. Comment is correct on both counts.
  • Regression test composer textarea font-size is >= 16px (prevents iOS focus-zoom) reads textarea.style.fontSize inline-only. Fail-closed shape noted by Wave 2 is real: if the style is ever refactored to a CSS class, style.fontSize returns "", parseFloat("")NaN, NaN >= 16 → false. Test will fail loudly, which is the right behavior — refactor must update the test.
  • >= 16 (not === 16) means a future bump (e.g. to 17px) still passes — sensible.
  • No new IO, no new state, no platform-side change.

Acknowledging Wave 2's out-of-scope note: MobileSpawn.tsx:300 still has fontSize: 13.5 — same iOS-zoom bug class, not in this PR. CEO-Assistant said she's filing the follow-up (task #225). Not a blocker for this PR.

LGTM. Approving.

**2nd-of-2 non-author approval (second-eyes pass; reviewer = hongming-pc2, not the author).** **Independently verified (read the full diff — only 2 files, +22/-1):** - One-line fix `fontSize: 14.5 → fontSize: 16` on `MobileChat.tsx:706`, with a thorough 7-line code comment explaining (a) the iOS Safari/WebKit 16px auto-zoom threshold on focus, (b) why the alternative `maximum-scale`/`user-scalable` viewport hack is rejected as a11y-regressive. Comment is correct on both counts. - Regression test `composer textarea font-size is >= 16px (prevents iOS focus-zoom)` reads `textarea.style.fontSize` inline-only. **Fail-closed shape** noted by Wave 2 is real: if the style is ever refactored to a CSS class, `style.fontSize` returns `""`, `parseFloat("")` → `NaN`, `NaN >= 16` → false. Test will fail loudly, which is the right behavior — refactor must update the test. - `>= 16` (not `=== 16`) means a future bump (e.g. to 17px) still passes — sensible. - No new IO, no new state, no platform-side change. **Acknowledging Wave 2's out-of-scope note:** `MobileSpawn.tsx:300` still has `fontSize: 13.5` — same iOS-zoom bug class, not in this PR. CEO-Assistant said she's filing the follow-up (task #225). Not a blocker for this PR. LGTM. Approving.
Author
Owner

/sop-ack root-cause: iOS Safari WebKit auto-zoom threshold at font-size <16px on input/textarea; MobileChat composer was 14.5px → triggered zoom on every focus. Documented WebKit behavior; the kbd/viewport-lock alternative is a11y-regressive (kills pinch-zoom). Confirmed by Wave 2 reviewer cross-check.

/sop-ack root-cause: iOS Safari WebKit auto-zoom threshold at font-size <16px on input/textarea; MobileChat composer was 14.5px → triggered zoom on every focus. Documented WebKit behavior; the kbd/viewport-lock alternative is a11y-regressive (kills pinch-zoom). Confirmed by Wave 2 reviewer cross-check.
Author
Owner

/sop-ack no-backwards-compat: Pure styling literal change (14.5 → 16) on a single composer input. No API, no schema, no env-var, no behavior change for screen-reader or keyboard nav. Regression test asserts >=16 (style.fontSize inline read). No downstream consumer depends on the prior value.

/sop-ack no-backwards-compat: Pure styling literal change (14.5 → 16) on a single composer input. No API, no schema, no env-var, no behavior change for screen-reader or keyboard nav. Regression test asserts >=16 (style.fontSize inline read). No downstream consumer depends on the prior value.
Owner

/sop-ack root-cause: iOS Safari WebKit auto-zoom threshold at font-size <16px on input/textarea; MobileChat composer was 14.5px → triggered zoom on every focus. Documented WebKit behavior; the maximum-scale viewport-lock alternative is a11y-regressive (kills pinch-zoom). Wave 2 reviewer cross-checked.

/sop-ack root-cause: iOS Safari WebKit auto-zoom threshold at font-size <16px on input/textarea; MobileChat composer was 14.5px → triggered zoom on every focus. Documented WebKit behavior; the maximum-scale viewport-lock alternative is a11y-regressive (kills pinch-zoom). Wave 2 reviewer cross-checked.
Owner

/sop-ack no-backwards-compat: Pure styling literal change (14.5 → 16) on a single composer input. No API, schema, env-var, or behavior change for screen-reader/keyboard nav. Regression test asserts >=16. No downstream consumer depends on the prior value.

/sop-ack no-backwards-compat: Pure styling literal change (14.5 → 16) on a single composer input. No API, schema, env-var, or behavior change for screen-reader/keyboard nav. Regression test asserts >=16. No downstream consumer depends on the prior value.
Author
Owner

/sop-tier-recheck — re-evaluate sop-checklist after engineers-team-membership update for hongming-pc2 (was 5/7, hongming-pc2 /sop-ack root-cause+no-backwards-compat now count as non-author team member)

/sop-tier-recheck — re-evaluate sop-checklist after engineers-team-membership update for hongming-pc2 (was 5/7, hongming-pc2 /sop-ack root-cause+no-backwards-compat now count as non-author team member)
Owner

/sop-ack root-cause iOS Safari WebKit auto-zoom threshold at font-size <16px on input/textarea; MobileChat composer was 14.5px → triggered zoom on every focus. Documented WebKit behavior; maximum-scale viewport-lock alternative is a11y-regressive.

/sop-ack root-cause iOS Safari WebKit auto-zoom threshold at font-size <16px on input/textarea; MobileChat composer was 14.5px → triggered zoom on every focus. Documented WebKit behavior; maximum-scale viewport-lock alternative is a11y-regressive.
Owner

/sop-ack no-backwards-compat Pure styling literal change 14.5→16 on a single composer input. No API, schema, env-var, or behavior change for screen-reader/keyboard nav. Regression test asserts >=16. No downstream consumer depends on the prior value.

/sop-ack no-backwards-compat Pure styling literal change 14.5→16 on a single composer input. No API, schema, env-var, or behavior change for screen-reader/keyboard nav. Regression test asserts >=16. No downstream consumer depends on the prior value.
Author
Owner

/sop-tier-recheck — managers team now includes hongming-pc2; re-evaluate root-cause + no-backwards-compat acks (comment ids 38739/38740 for #1434, 38741/38742 for #1435, 38743/38744 for #1437)

/sop-tier-recheck — managers team now includes hongming-pc2; re-evaluate root-cause + no-backwards-compat acks (comment ids 38739/38740 for #1434, 38741/38742 for #1435, 38743/38744 for #1437)
hongming merged commit fe29717b86 into staging 2026-05-18 19:36:03 +00:00
Sign in to join this conversation.
No Reviewers
5 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: molecule-ai/molecule-core#1434