From 5cb05079417e676f0d2526280b8240d69ff76895 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 1/2] 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>
Co-authored-by: codex <codex@users.noreply.github.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 8113099638e..6c435742136 100644
--- a/apps/web/src/components/ComposerPromptEditor.tsx
+++ b/apps/web/src/components/ComposerPromptEditor.tsx
@@ -1624,7 +1624,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"
@@ -1635,7 +1635,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 e13f3bb0aeb..990d67f0eb2 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -568,7 +568,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
           {renamingThreadKey === threadKey ? (
             <input
               ref={handleRenameInputRef}
-              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={handleRenameInputChange}
               onKeyDown={handleRenameInputKeyDown}

From 8aa0401a07339d0061617833ef2bf3ee7f4edf8b Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Wed, 29 Apr 2026 17:55:57 -0700
Subject: [PATCH 2/2] Prevent mobile input zoom in composer and sidebar

- Use base text size for editable prompt and rename inputs
- Keep tooltip widths and wrapping consistent with longer content
- Preserve 14px sizing on sm+ breakpoints
---
 apps/web/src/components/ComposerPromptEditor.tsx | 11 ++++-------
 apps/web/src/components/Sidebar.tsx              |  2 +-
 2 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/components/ComposerPromptEditor.tsx b/apps/web/src/components/ComposerPromptEditor.tsx
index 6c435742136..f889b8f6ec8 100644
--- a/apps/web/src/components/ComposerPromptEditor.tsx
+++ b/apps/web/src/components/ComposerPromptEditor.tsx
@@ -152,10 +152,7 @@ function ComposerMentionDecorator(props: { path: string }) {
   return (
     <Tooltip>
       <TooltipTrigger render={chip} />
-      <TooltipPopup
-        side="top"
-        className="max-w-[30rem] whitespace-normal leading-tight wrap-anywhere"
-      >
+      <TooltipPopup side="top" className="max-w-120 whitespace-normal leading-tight wrap-anywhere">
         {props.path}
       </TooltipPopup>
     </Tooltip>
@@ -275,7 +272,7 @@ function ComposerSkillDecorator(props: { skillLabel: string; skillDescription: s
   return (
     <Tooltip>
       <TooltipTrigger render={chip} />
-      <TooltipPopup side="top" className="max-w-[30rem] whitespace-normal leading-tight">
+      <TooltipPopup side="top" className="max-w-120 whitespace-normal leading-tight">
         {props.skillDescription}
       </TooltipPopup>
     </Tooltip>
@@ -1624,7 +1621,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-[16px] sm: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 wrap-break-word bg-transparent text-base sm:text-[14px] leading-relaxed text-foreground focus:outline-none",
                 className,
               )}
               data-testid="composer-editor"
@@ -1635,7 +1632,7 @@ function ComposerPromptEditorInner({
           }
           placeholder={
             terminalContexts.length > 0 ? null : (
-              <div className="pointer-events-none absolute inset-0 text-[16px] sm:text-[14px] leading-relaxed text-muted-foreground/35">
+              <div className="pointer-events-none absolute inset-0 text-base 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 990d67f0eb2..4db083dcce3 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -568,7 +568,7 @@ const SidebarThreadRow = memo(function SidebarThreadRow(props: SidebarThreadRowP
           {renamingThreadKey === threadKey ? (
             <input
               ref={handleRenameInputRef}
-              className="min-w-0 flex-1 truncate text-[16px] sm:text-xs bg-transparent outline-none border border-ring rounded px-0.5"
+              className="min-w-0 flex-1 truncate text-base sm:text-xs bg-transparent outline-none border border-ring rounded px-0.5"
               value={renamingTitle}
               onChange={handleRenameInputChange}
               onKeyDown={handleRenameInputKeyDown}