Skip to content

fix(web): prevent iOS Safari auto-zoom on input focus#1652

Open
bergholmm wants to merge 1 commit intopingdotgg:mainfrom
bergholmm:fix/mobile-input-zoom
Open

fix(web): prevent iOS Safari auto-zoom on input focus#1652
bergholmm wants to merge 1 commit intopingdotgg:mainfrom
bergholmm:fix/mobile-input-zoom

Conversation

@bergholmm
Copy link
Copy Markdown

@bergholmm bergholmm commented Apr 1, 2026

What Changed

Use text-[16px] sm:text-[14px] on the composer editor, its placeholder, and the sidebar thread rename input. This sets font size to 16px on mobile (< 640px) while preserving the original smaller sizes on desktop (≥ 640px).

Why

iOS Safari automatically zooms into any input/contenteditable element with font-size < 16px when focused. This breaks the viewport in mobile web/PWA — the user has to manually pinch-to-zoom back out after every interaction. 16px is the threshold that prevents this behavior.

Checklist

  • This PR is small and focused
  • I explained what changed and why
  • I included before/after screenshots for any UI changes
  • I included a video for animation/interaction changes

iOS Safari automatically zooms into input/contenteditable elements
when their font size is below 16px. Use 16px on mobile (< 640px)
and preserve the original smaller sizes on desktop (>= 640px).

Affected inputs:
- Composer editor (text-[16px] sm:text-[14px])
- Composer placeholder (text-[16px] sm:text-[14px])
- Sidebar thread rename input (text-[16px] sm:text-xs)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Apr 1, 2026

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: a22f222b-64c3-4b89-87b4-9b5526623c72

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions github-actions bot added vouch:unvouched PR author is not yet trusted in the VOUCHED list. size:XS 0-9 changed lines (additions + deletions). labels Apr 1, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size:XS 0-9 changed lines (additions + deletions). vouch:unvouched PR author is not yet trusted in the VOUCHED list.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant