← Back to PRs

#16742: fix: prevent iOS Safari zoom on input focus and fix outer shell scrolling

by alewcock open 2026-02-15 02:22 View on GitHub →
app: web-ui size: XS
## 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