#16742: fix: prevent iOS Safari zoom on input focus and fix outer shell scrolling
app: web-ui
size: XS
Cluster:
Web UI Enhancements and Fixes
## Problem
On iOS Safari (mobile), tapping the chat compose textarea causes the viewport to zoom in slightly, making the entire page scrollable horizontally and vertically. The chat becomes an inner scroller within a broken layout.
## Root Causes
1. **Textarea font-size < 16px** — iOS Safari auto-zooms any input with font-size below 16px on focus
2. **Viewport meta missing `maximum-scale=1.0`** — allows zoom on focus
3. **Body not locked** — `html`/`body` lacked `overflow: hidden` and `position: fixed`, so the outer shell became scrollable when the keyboard opened
## Changes
- `ui/index.html`: Added `maximum-scale=1.0, user-scalable=no` to viewport meta
- `ui/src/styles/base.css`: Added `overflow: hidden` on `html, body` + `position: fixed; width: 100%` on `body`
- `ui/src/styles/layout.mobile.css`: Bumped textarea font-size to 16px at both mobile breakpoints (`600px` and `400px`)
## Testing
Tested on iOS Safari (iPhone) via Tailscale funnel. Before: zoom + scroll on focus. After: fixed viewport, only the chat thread scrolls.
<!-- greptile_comment -->
<h3>Greptile Summary</h3>
Fixes iOS Safari auto-zoom and scroll issues when focusing on the chat textarea. The PR addresses three root causes: textarea font-size below 16px triggering auto-zoom, missing viewport scale restrictions, and body/html not being locked to prevent outer shell scrolling.
- Added `maximum-scale=1.0, user-scalable=no` to viewport meta tag to prevent zoom on input focus
- Applied `overflow: hidden` to `html` and `body`, plus `position: fixed; width: 100%` to `body` to lock the viewport
- Increased textarea font-size from 14px/13px to 16px in mobile breakpoints to prevent iOS Safari auto-zoom behavior
The changes are well-targeted and follow iOS Safari's documented behavior. The app's scroll architecture (`.shell` with grid layout, `.content` and `.chat-thread` as scrollable containers) already expected a fixed outer shell, so these changes align with the existing design.
<h3>Confidence Score: 5/5</h3>
- This PR is safe to merge with minimal risk
- The changes are minimal, well-documented, and directly address a specific iOS Safari issue with established solutions (16px font-size minimum, viewport scale restrictions, fixed body positioning). The modifications align with the existing CSS architecture where `.shell`, `.content`, and `.chat-thread` already manage their own overflow/scrolling behavior. The PR author tested the changes on iOS Safari via Tailscale funnel and confirmed the fix works as expected.
- No files require special attention
<sub>Last reviewed commit: 5fde24a</sub>
<!-- greptile_other_comments_section -->
<!-- /greptile_comment -->
Most Similar PRs
#9175: Fix: Constrain webchat 'New messages' icon size to prevent massive ...
by vishaltandale00 · 2026-02-04
78.6%
#20347: fix(webchat): resolve streaming scroll race condition
by ndaemy · 2026-02-18
74.8%
#9432: fix(ui): improve Firefox/Gecko compatibility for chat layout
by dbottme · 2026-02-05
74.5%
#6521: fix: addressed style issue for chat compose and thread on mobile
by spencer-rafada · 2026-02-01
73.9%
#16593: fix: mobile compose row layout
by alewcock · 2026-02-14
73.9%
#9411: Fix: Web UI long message overflow causing unreadable text
by vishaltandale00 · 2026-02-05
73.6%
#6812: fix(ui): make topbar height flexible to avoid header/title overlap
by x0m4ek · 2026-02-02
72.5%
#7522: fix(webchat): auto-scroll when message queue changes
by alsoknownasfoo · 2026-02-02
72.2%
#22458: Codex/macos chat corner clip
by apethree · 2026-02-21
72.0%
#9122: fix(webchat): constrain .chat-new-messages to button size
by ridermw · 2026-02-04
71.4%