From d58ea96353ebd3205ed800228c22c4e4686550b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marcus=20Gr=C3=A5n=C3=A4s?= <bergholm@hey.com>
Date: Wed, 1 Apr 2026 13:15:55 +0200
Subject: [PATCH] fix(web): prevent iOS Safari auto-zoom on input focus

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>
---
 apps/web/src/components/ComposerPromptEditor.tsx | 4 ++--
 apps/web/src/components/Sidebar.tsx              | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/components/ComposerPromptEditor.tsx b/apps/web/src/components/ComposerPromptEditor.tsx
index 338d9f7bf1..c29cce7d65 100644
--- a/apps/web/src/components/ComposerPromptEditor.tsx
+++ b/apps/web/src/components/ComposerPromptEditor.tsx
@@ -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"
@@ -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">
                 {placeholder}
               </div>
             )
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index c819ce81cd..4d069dbb27 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -1466,7 +1466,7 @@ export default function Sidebar() {
                       el.select();
                     }
                   }}
-                  className="min-w-0 flex-1 truncate text-xs bg-transparent outline-none border border-ring rounded px-0.5"
+                  className="min-w-0 flex-1 truncate text-[16px] sm:text-xs bg-transparent outline-none border border-ring rounded px-0.5"
                   value={renamingTitle}
                   onChange={(e) => setRenamingTitle(e.target.value)}
                   onKeyDown={(e) => {