fix(web): prevent iOS auto-zoom on chat input focus by murataslan1 · Pull Request #1292 · pingdotgg/t3code

murataslan1 · 2026-03-22T00:08:14Z

Summary

Fixes the iOS auto-zoom that occurs when focusing the chat composer input, causing layout shifts and broken sticky headers.

Root Cause

iOS Safari/Chrome automatically zoom into input fields with font-size below 16px. The composer editor (ComposerPromptEditor.tsx) used text-[14px], which triggers this behavior on mobile devices.

Fix

Set composer font-size to 16px on mobile viewports, 14px on sm+ (matching placeholder)
Add maximum-scale=1 to the viewport meta tag to prevent auto-zoom on all inputs

Test plan

Open t3code on iOS Safari/Chrome
Tap the chat input
Verify no zoom occurs and sticky header/footer stay in place

Fixes #1265

Note

Prevent iOS auto-zoom on chat input focus

Sets font-size to 16px (iOS's zoom threshold) on the chat input in ComposerPromptEditor.tsx, reverting to 14px at the sm breakpoint and above.
Adds maximum-scale=1.0 to the viewport meta tag in index.html as a secondary safeguard.
Behavioral Change: maximum-scale=1.0 disables user-initiated pinch-to-zoom on all browsers that respect it.

^{Macroscope summarized 47f5a8f.}

iOS Safari and Chrome auto-zoom when focusing an input with font-size below 16px. The composer editor used text-[14px], triggering this behavior and causing layout shifts. - Set composer font-size to 16px on mobile, 14px on sm+ breakpoint - Add maximum-scale=1 to viewport meta to prevent zoom on all inputs Fixes pingdotgg#1265

coderabbitai · 2026-03-22T00:08:21Z

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: 39b0ce37-1441-452b-a2e3-bd2966caf569

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.}

Tip

CodeRabbit can use your project's `biome` configuration to improve the quality of JS/TS/CSS/JSON code reviews.

Add a configuration file to your project to customize how CodeRabbit runs biome.

Copilot

Pull request overview

This PR addresses iOS Safari/Chrome auto-zoom and resulting layout shifts when focusing the chat composer by increasing the effective font-size on small viewports and adjusting the app’s viewport configuration.

Changes:

Update the chat composer editor and placeholder to use 16px font-size on mobile (sm breakpoint and below) while keeping 14px on sm+.
Update index.html viewport meta tag to include maximum-scale=1.0.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.

File	Description
apps/web/src/components/ComposerPromptEditor.tsx	Adjusts composer editor + placeholder font sizing to avoid iOS focus auto-zoom.
apps/web/index.html	Modifies viewport meta tag to limit page scaling.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-03-22T00:10:19Z

apps/web/index.html

  <head>
    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />


Setting maximum-scale=1.0 in the viewport meta tag effectively disables pinch-zoom across the entire app on mobile browsers, which is an accessibility regression (users who rely on zoom can no longer enlarge text/UI). Consider removing maximum-scale and addressing iOS input auto-zoom via font-size >= 16px on focus/for mobile (or other targeted iOS-only styling) instead of globally restricting zoom.

Suggested change

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Copilot · 2026-03-22T00:10:20Z

apps/web/src/components/ComposerPromptEditor.tsx

@@ -1104,7 +1104,7 @@ function ComposerPromptEditorInner({
          }
          placeholder={
            terminalContexts.length > 0 ? null : (
-              <div className="pointer-events-none absolute inset-0 text-[14px] leading-relaxed text-muted-foreground/35">
+              <div className="pointer-events-none absolute inset-0 text-[16px] sm:text-[14px] leading-relaxed text-muted-foreground/35">


The codebase generally uses Tailwind semantic font-size utilities (e.g., text-base on mobile with sm:text-sm) for form controls to avoid iOS auto-zoom while keeping sizes consistent (see apps/web/src/components/ui/input.tsx:35-37). Using arbitrary sizes (text-[16px] sm:text-[14px]) here works but makes the sizing less consistent/maintainable; consider switching to the semantic utilities for the editor and placeholder as well.

Copilot AI review requested due to automatic review settings March 22, 2026 00:08

github-actions bot added size:XS 0-9 changed lines (additions + deletions). vouch:unvouched PR author is not yet trusted in the VOUCHED list. labels Mar 22, 2026

Copilot started reviewing on behalf of murataslan1 March 22, 2026 00:08 View session

Copilot AI reviewed Mar 22, 2026

View reviewed changes

github-actions bot added size:S 10-29 changed lines (additions + deletions). and removed size:XS 0-9 changed lines (additions + deletions). labels Mar 22, 2026

murataslan1 force-pushed the fix/mobile-input-zoom branch from a1617aa to 47f5a8f Compare March 22, 2026 00:11

github-actions bot added size:XS 0-9 changed lines (additions + deletions). and removed size:S 10-29 changed lines (additions + deletions). labels Mar 22, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(web): prevent iOS auto-zoom on chat input focus#1292

fix(web): prevent iOS auto-zoom on chat input focus#1292
murataslan1 wants to merge 1 commit intopingdotgg:mainfrom
murataslan1:fix/mobile-input-zoom

murataslan1 commented Mar 22, 2026 •

edited by macroscopeapp bot

Loading

Uh oh!

coderabbitai bot commented Mar 22, 2026 •

edited

Loading

Review skipped

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 22, 2026

Uh oh!

Copilot AI Mar 22, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Conversation

murataslan1 commented Mar 22, 2026 • edited by macroscopeapp bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Root Cause

Fix

Test plan

Prevent iOS auto-zoom on chat input focus

Uh oh!

coderabbitai bot commented Mar 22, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 22, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

murataslan1 commented Mar 22, 2026 •

edited by macroscopeapp bot

Loading

coderabbitai bot commented Mar 22, 2026 •

edited

Loading