Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
murataslan1 wants to merge 1 commit into
base: main
Choose a base branch
from
+3 −3
Open

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/web/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html lang="en">
<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" />
Copy link

Copilot AI Mar 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 uses AI. Check for mistakes.
<link rel="icon" href="/favicon.ico" sizes="48x48" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
Expand Down
4 changes: 2 additions & 2 deletions apps/web/src/components/ComposerPromptEditor.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1093,7 +1093,7 @@ function ComposerPromptEditorInner({
contentEditable={
<ContentEditable
className={cn(
"block max-h-[200px] min-h-17.5 w-full overflow-y-auto whitespace-pre-wrap break-words bg-transparent text-[14px] leading-relaxed text-foreground focus:outline-none",
"block max-h-[200px] min-h-17.5 w-full overflow-y-auto whitespace-pre-wrap break-words bg-transparent text-[16px] sm:text-[14px] leading-relaxed text-foreground focus:outline-none",
className,
)}
data-testid="composer-editor"
Expand All @@ -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">
Comment on lines 1096 to +1107
Copy link

Copilot AI Mar 22, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 uses AI. Check for mistakes.
{placeholder}
</div>
)
Expand Down
Loading