From b304d7a0d4b327611c880dff86268acceeb5de26 Mon Sep 17 00:00:00 2001
From: Jono Kemball <jono-kemball@idexx.com>
Date: Fri, 17 Apr 2026 10:26:12 +1200
Subject: [PATCH 1/6] Fix mobile composer touch behavior

- Use coarse-pointer detection to switch Enter handling
- Increase composer text size on mobile
- Surface sidebar actions on touch devices
---
 .../src/components/ComposerPromptEditor.tsx    |  4 ++--
 apps/web/src/components/Sidebar.tsx            |  4 ++--
 apps/web/src/components/chat/ChatComposer.tsx  | 18 +++++++++++++++---
 apps/web/src/hooks/useMediaQuery.ts            |  5 +++++
 4 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/apps/web/src/components/ComposerPromptEditor.tsx b/apps/web/src/components/ComposerPromptEditor.tsx
index 8113099638e..a57edf35677 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-base leading-relaxed text-foreground focus:outline-none sm:text-[14px]",
                 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-base leading-relaxed text-muted-foreground/35 sm:text-[14px]">
                 {placeholder}
               </div>
             )
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 9939833a951..cbd9110ae97 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -1941,7 +1941,7 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
                       ? "Remote project"
                       : "Available in multiple environments"
                   }
-                  className="pointer-events-none absolute top-1 right-1.5 inline-flex size-5 items-center justify-center rounded-md text-muted-foreground/50 transition-opacity duration-150 group-hover/project-header:opacity-0 group-focus-within/project-header:opacity-0"
+                  className="pointer-events-none absolute top-1 right-1.5 inline-flex size-5 items-center justify-center rounded-md text-muted-foreground/50 transition-opacity duration-150 pointer-coarse:opacity-0 group-hover/project-header:opacity-0 group-focus-within/project-header:opacity-0"
                 />
               }
             >
@@ -1955,7 +1955,7 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
         <Tooltip>
           <TooltipTrigger
             render={
-              <div className="pointer-events-none absolute top-1 right-1.5 opacity-0 transition-opacity duration-150 group-hover/project-header:pointer-events-auto group-hover/project-header:opacity-100 group-focus-within/project-header:pointer-events-auto group-focus-within/project-header:opacity-100">
+              <div className="pointer-events-none absolute top-1 right-1.5 opacity-0 transition-opacity duration-150 pointer-coarse:pointer-events-auto pointer-coarse:opacity-100 group-hover/project-header:pointer-events-auto group-hover/project-header:opacity-100 group-focus-within/project-header:pointer-events-auto group-focus-within/project-header:opacity-100">
                 <button
                   type="button"
                   aria-label={`Create new thread in ${project.displayName}`}
diff --git a/apps/web/src/components/chat/ChatComposer.tsx b/apps/web/src/components/chat/ChatComposer.tsx
index f1663901ced..5b1eab502a9 100644
--- a/apps/web/src/components/chat/ChatComposer.tsx
+++ b/apps/web/src/components/chat/ChatComposer.tsx
@@ -102,6 +102,7 @@ import type { PendingApproval, PendingUserInput } from "../../session-logic";
 import { deriveLatestContextWindowSnapshot } from "../../lib/contextWindow";
 import { formatProviderSkillDisplayName } from "../../providerSkillPresentation";
 import { searchProviderSkills } from "../../providerSkillSearch";
+import { useIsTouchDevice } from "../../hooks/useMediaQuery";
 
 const IMAGE_SIZE_LIMIT_LABEL = `${Math.round(PROVIDER_SEND_TURN_MAX_IMAGE_BYTES / (1024 * 1024))}MB`;
 
@@ -516,6 +517,11 @@ export const ChatComposer = memo(
       onExpandImage,
     } = props;
 
+    // ------------------------------------------------------------------
+    // Touch device detection (for Enter-to-send vs. Enter-to-newline)
+    // ------------------------------------------------------------------
+    const isTouchDevice = useIsTouchDevice();
+
     // ------------------------------------------------------------------
     // Store subscriptions (prompt / images / terminal contexts)
     // ------------------------------------------------------------------
@@ -1500,9 +1506,15 @@ export const ChatComposer = memo(
           return true;
         }
       }
-      if (key === "Enter" && !event.shiftKey) {
-        void onSend();
-        return true;
+      if (key === "Enter") {
+        // On touch devices, bare Enter inserts a newline;
+        // Cmd/Ctrl+Enter sends. On desktop, bare Enter sends.
+        const shouldSend = isTouchDevice ? event.metaKey || event.ctrlKey : !event.shiftKey;
+        if (shouldSend) {
+          void onSend();
+          return true;
+        }
+        return false;
       }
       return false;
     };
diff --git a/apps/web/src/hooks/useMediaQuery.ts b/apps/web/src/hooks/useMediaQuery.ts
index e7e007b0b7c..7fb4d845c00 100644
--- a/apps/web/src/hooks/useMediaQuery.ts
+++ b/apps/web/src/hooks/useMediaQuery.ts
@@ -85,3 +85,8 @@ export function useMediaQuery(query: BreakpointQuery | MediaQueryInput | (string
 export function useIsMobile(): boolean {
   return useMediaQuery("max-md");
 }
+
+/** Returns `true` when the primary pointing device is coarse (finger / stylus). */
+export function useIsTouchDevice(): boolean {
+  return useMediaQuery({ pointer: "coarse" });
+}

From 1ba7e358cd7b3300ef833370581fcd2cc9bc6c5b Mon Sep 17 00:00:00 2001
From: Jono Kemball <jono-kemball@idexx.com>
Date: Fri, 17 Apr 2026 12:19:58 +1200
Subject: [PATCH 2/6] feat(web): collapse mobile composer by default

Port the mobile composer collapse feature from PR #1263 into the
extracted ChatComposer component. On small viewports (<640px), the
composer collapses to a compact single-row bar showing truncated prompt
text and a send button when unfocused. Tapping expands the full
composer with editor focus; blurring collapses it back.

Also adds onPointerDown handlers on submit buttons to prevent iOS
from stealing focus before the click registers.

Co-authored-by: Hiram Chirino <hiram@hiramchirino.com>
---
 apps/web/src/components/chat/ChatComposer.tsx | 157 ++++++++++++++----
 .../chat/ComposerPrimaryActions.tsx           |   4 +
 2 files changed, 133 insertions(+), 28 deletions(-)

diff --git a/apps/web/src/components/chat/ChatComposer.tsx b/apps/web/src/components/chat/ChatComposer.tsx
index 5b1eab502a9..a2e15400f82 100644
--- a/apps/web/src/components/chat/ChatComposer.tsx
+++ b/apps/web/src/components/chat/ChatComposer.tsx
@@ -102,7 +102,7 @@ import type { PendingApproval, PendingUserInput } from "../../session-logic";
 import { deriveLatestContextWindowSnapshot } from "../../lib/contextWindow";
 import { formatProviderSkillDisplayName } from "../../providerSkillPresentation";
 import { searchProviderSkills } from "../../providerSkillSearch";
-import { useIsTouchDevice } from "../../hooks/useMediaQuery";
+import { useIsTouchDevice, useMediaQuery } from "../../hooks/useMediaQuery";
 
 const IMAGE_SIZE_LIMIT_LABEL = `${Math.round(PROVIDER_SEND_TURN_MAX_IMAGE_BYTES / (1024 * 1024))}MB`;
 
@@ -522,6 +522,13 @@ export const ChatComposer = memo(
     // ------------------------------------------------------------------
     const isTouchDevice = useIsTouchDevice();
 
+    // ------------------------------------------------------------------
+    // Mobile collapsed composer state
+    // ------------------------------------------------------------------
+    const [isComposerFocused, setIsComposerFocused] = useState(false);
+    const isMobileViewport = useMediaQuery("max-sm");
+    const isComposerCollapsedMobile = isMobileViewport && !isComposerFocused;
+
     // ------------------------------------------------------------------
     // Store subscriptions (prompt / images / terminal contexts)
     // ------------------------------------------------------------------
@@ -667,7 +674,9 @@ export const ChatComposer = memo(
     // ------------------------------------------------------------------
     const composerEditorRef = useRef<ComposerPromptEditorHandle>(null);
     const composerFormRef = useRef<HTMLFormElement>(null);
+    const composerSurfaceRef = useRef<HTMLDivElement>(null);
     const composerFormHeightRef = useRef(0);
+    const composerBlurFrameRef = useRef<number | null>(null);
     const composerSelectLockRef = useRef(false);
     const composerMenuOpenRef = useRef(false);
     const composerMenuItemsRef = useRef<ComposerCommandItem[]>([]);
@@ -1723,6 +1732,36 @@ export const ChatComposer = memo(
       ],
     );
 
+    // ------------------------------------------------------------------
+    // Mobile collapse: blur scheduling
+    // ------------------------------------------------------------------
+    const scheduleComposerCollapseCheck = useCallback(() => {
+      if (composerBlurFrameRef.current !== null) {
+        window.cancelAnimationFrame(composerBlurFrameRef.current);
+      }
+      composerBlurFrameRef.current = window.requestAnimationFrame(() => {
+        composerBlurFrameRef.current = null;
+        const composerSurface = composerSurfaceRef.current;
+        const activeElement = document.activeElement;
+        if (
+          composerSurface &&
+          activeElement instanceof Node &&
+          composerSurface.contains(activeElement)
+        ) {
+          return;
+        }
+        setIsComposerFocused(false);
+      });
+    }, []);
+
+    useEffect(() => {
+      return () => {
+        if (composerBlurFrameRef.current !== null) {
+          window.cancelAnimationFrame(composerBlurFrameRef.current);
+        }
+      };
+    }, []);
+
     // Render
     // ------------------------------------------------------------------
     return (
@@ -1743,43 +1782,104 @@ export const ChatComposer = memo(
           onDrop={onComposerDrop}
         >
           <div
+            ref={composerSurfaceRef}
             className={cn(
               "rounded-[20px] border bg-card transition-colors duration-200 has-focus-visible:border-ring/45",
               isDragOverComposer ? "border-primary/70 bg-accent/30" : "border-border",
               composerProviderState.composerSurfaceClassName,
             )}
+            onFocusCapture={() => {
+              if (composerBlurFrameRef.current !== null) {
+                window.cancelAnimationFrame(composerBlurFrameRef.current);
+                composerBlurFrameRef.current = null;
+              }
+              setIsComposerFocused(true);
+            }}
+            onBlurCapture={() => {
+              scheduleComposerCollapseCheck();
+            }}
+            onClick={() => {
+              if (isComposerCollapsedMobile) {
+                setIsComposerFocused(true);
+                requestAnimationFrame(() => {
+                  composerEditorRef.current?.focusAtEnd();
+                });
+              }
+            }}
           >
-            {activePendingApproval ? (
-              <div className="rounded-t-[19px] border-b border-border/65 bg-muted/20">
-                <ComposerPendingApprovalPanel
-                  approval={activePendingApproval}
-                  pendingCount={pendingApprovals.length}
-                />
-              </div>
-            ) : pendingUserInputs.length > 0 ? (
-              <div className="rounded-t-[19px] border-b border-border/65 bg-muted/20">
-                <ComposerPendingUserInputPanel
-                  pendingUserInputs={pendingUserInputs}
-                  respondingRequestIds={respondingRequestIds}
-                  answers={activePendingDraftAnswers}
-                  questionIndex={activePendingQuestionIndex}
-                  onToggleOption={onSelectActivePendingUserInputOption}
-                  onAdvance={onAdvanceActivePendingUserInput}
-                />
-              </div>
-            ) : showPlanFollowUpPrompt && activeProposedPlan ? (
-              <div className="rounded-t-[19px] border-b border-border/65 bg-muted/20">
-                <ComposerPlanFollowUpBanner
-                  key={activeProposedPlan.id}
-                  planTitle={proposedPlanTitle(activeProposedPlan.planMarkdown) ?? null}
-                />
+            {!isComposerCollapsedMobile &&
+              (activePendingApproval ? (
+                <div className="rounded-t-[19px] border-b border-border/65 bg-muted/20">
+                  <ComposerPendingApprovalPanel
+                    approval={activePendingApproval}
+                    pendingCount={pendingApprovals.length}
+                  />
+                </div>
+              ) : pendingUserInputs.length > 0 ? (
+                <div className="rounded-t-[19px] border-b border-border/65 bg-muted/20">
+                  <ComposerPendingUserInputPanel
+                    pendingUserInputs={pendingUserInputs}
+                    respondingRequestIds={respondingRequestIds}
+                    answers={activePendingDraftAnswers}
+                    questionIndex={activePendingQuestionIndex}
+                    onToggleOption={onSelectActivePendingUserInputOption}
+                    onAdvance={onAdvanceActivePendingUserInput}
+                  />
+                </div>
+              ) : showPlanFollowUpPrompt && activeProposedPlan ? (
+                <div className="rounded-t-[19px] border-b border-border/65 bg-muted/20">
+                  <ComposerPlanFollowUpBanner
+                    key={activeProposedPlan.id}
+                    planTitle={proposedPlanTitle(activeProposedPlan.planMarkdown) ?? null}
+                  />
+                </div>
+              ) : null)}
+
+            {/* Collapsed mobile preview */}
+            {isComposerCollapsedMobile && (
+              <div className="flex items-center justify-between gap-2 px-3 py-2">
+                <span
+                  className={cn(
+                    "min-w-0 truncate text-[14px]",
+                    (activePendingProgress ? activePendingProgress.customAnswer : prompt.trim())
+                      ? "text-foreground"
+                      : "text-muted-foreground/35",
+                  )}
+                >
+                  {activePendingProgress
+                    ? activePendingProgress.customAnswer ||
+                      "Type your own answer, or leave this blank to use the selected option"
+                    : prompt.trim() || "Ask anything..."}
+                </span>
+                <button
+                  type="button"
+                  className="flex size-8 shrink-0 items-center justify-center rounded-full bg-primary/90 text-primary-foreground disabled:opacity-30"
+                  disabled={isSendBusy || isConnecting || !composerSendState.hasSendableContent}
+                  aria-label="Send message"
+                  onPointerDown={(e) => e.preventDefault()}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    void onSend();
+                  }}
+                >
+                  <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+                    <path
+                      d="M8 3L8 13M8 3L4 7M8 3L12 7"
+                      stroke="currentColor"
+                      strokeWidth="2"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                </button>
               </div>
-            ) : null}
+            )}
 
             <div
               className={cn(
                 "relative px-3 pb-2 sm:px-4",
                 hasComposerHeader ? "pt-2.5 sm:pt-3" : "pt-3.5 sm:pt-4",
+                isComposerCollapsedMobile && "hidden",
               )}
             >
               {composerMenuOpen && !isComposerApprovalState && (
@@ -1801,7 +1901,8 @@ export const ChatComposer = memo(
                 </div>
               )}
 
-              {!isComposerApprovalState &&
+              {!isComposerCollapsedMobile &&
+                !isComposerApprovalState &&
                 pendingUserInputs.length === 0 &&
                 composerImages.length > 0 && (
                   <div className="mb-3 flex flex-wrap gap-2">
@@ -1904,7 +2005,7 @@ export const ChatComposer = memo(
             </div>
 
             {/* Bottom toolbar */}
-            {activePendingApproval ? (
+            {isComposerCollapsedMobile ? null : activePendingApproval ? (
               <div className="flex items-center justify-end gap-2 px-2.5 pb-2.5 sm:px-3 sm:pb-3">
                 <ComposerPendingApprovalActions
                   requestId={activePendingApproval.requestId}
diff --git a/apps/web/src/components/chat/ComposerPrimaryActions.tsx b/apps/web/src/components/chat/ComposerPrimaryActions.tsx
index 2bc40fe6ae8..1a88cd4afdc 100644
--- a/apps/web/src/components/chat/ComposerPrimaryActions.tsx
+++ b/apps/web/src/components/chat/ComposerPrimaryActions.tsx
@@ -90,6 +90,7 @@ export const ComposerPrimaryActions = memo(function ComposerPrimaryActions({
           type="submit"
           size="sm"
           className={cn("rounded-full", compact ? "px-3" : "px-4")}
+          onPointerDown={(e) => e.preventDefault()}
           disabled={
             pendingAction.isResponding ||
             (pendingAction.isLastQuestion ? !pendingAction.isComplete : !pendingAction.canAdvance)
@@ -128,6 +129,7 @@ export const ComposerPrimaryActions = memo(function ComposerPrimaryActions({
           type="submit"
           size="sm"
           className={cn("rounded-full", compact ? "h-9 px-3 sm:h-8" : "h-9 px-4 sm:h-8")}
+          onPointerDown={(e) => e.preventDefault()}
           disabled={isSendBusy || isConnecting}
         >
           {isConnecting || isSendBusy ? "Sending..." : "Refine"}
@@ -141,6 +143,7 @@ export const ComposerPrimaryActions = memo(function ComposerPrimaryActions({
           type="submit"
           size="sm"
           className="h-9 rounded-l-full rounded-r-none px-4 sm:h-8"
+          onPointerDown={(e) => e.preventDefault()}
           disabled={isSendBusy || isConnecting}
         >
           {isConnecting || isSendBusy ? "Sending..." : "Implement"}
@@ -176,6 +179,7 @@ export const ComposerPrimaryActions = memo(function ComposerPrimaryActions({
     <button
       type="submit"
       className="flex h-9 w-9 enabled:cursor-pointer items-center justify-center rounded-full bg-primary/90 text-primary-foreground transition-all duration-150 hover:bg-primary hover:scale-105 disabled:pointer-events-none disabled:opacity-30 disabled:hover:scale-100 sm:h-8 sm:w-8"
+      onPointerDown={(e) => e.preventDefault()}
       disabled={isSendBusy || isConnecting || !hasSendableContent}
       aria-label={
         isConnecting

From 9f43db7e1dae74b23d69b1b2c2f54a2c2d488e2c Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Wed, 29 Apr 2026 23:11:03 -0700
Subject: [PATCH 3/6] Fix mobile safe area layout

Co-authored-by: codex <codex@users.noreply.github.com>
---
 apps/web/src/components/ChatView.tsx          | 40 +++++++++++++++++++
 .../src/components/NoActiveThreadState.tsx    |  2 +-
 apps/web/src/index.css                        | 25 ++++++++++++
 .../routes/_chat.$environmentId.$threadId.tsx |  4 +-
 apps/web/src/routes/_chat.draft.$draftId.tsx  |  4 +-
 apps/web/src/routes/settings.tsx              |  2 +-
 6 files changed, 71 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index 0f22ba66be3..4fbc62f9342 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -335,6 +335,44 @@ type ChatViewProps =
       draftId: DraftId;
     };
 
+function useMobileRootScrollReset(enabled: boolean) {
+  useEffect(() => {
+    if (!enabled || typeof window === "undefined") {
+      return;
+    }
+
+    let rafId: number | null = null;
+    const resetRootScroll = () => {
+      if (rafId !== null) {
+        return;
+      }
+      rafId = window.requestAnimationFrame(() => {
+        rafId = null;
+        if (window.scrollX !== 0 || window.scrollY !== 0) {
+          window.scrollTo(0, 0);
+        }
+      });
+    };
+
+    resetRootScroll();
+    const visualViewport = window.visualViewport;
+    visualViewport?.addEventListener("resize", resetRootScroll);
+    visualViewport?.addEventListener("scroll", resetRootScroll);
+    window.addEventListener("resize", resetRootScroll);
+    window.addEventListener("focusout", resetRootScroll, true);
+
+    return () => {
+      if (rafId !== null) {
+        window.cancelAnimationFrame(rafId);
+      }
+      visualViewport?.removeEventListener("resize", resetRootScroll);
+      visualViewport?.removeEventListener("scroll", resetRootScroll);
+      window.removeEventListener("resize", resetRootScroll);
+      window.removeEventListener("focusout", resetRootScroll, true);
+    };
+  }, [enabled]);
+}
+
 interface TerminalLaunchContext {
   threadId: ThreadId;
   cwd: string;
@@ -686,7 +724,9 @@ export default function ChatView(props: ChatViewProps) {
   const [pendingUserInputQuestionIndexByRequestId, setPendingUserInputQuestionIndexByRequestId] =
     useState<Record<string, number>>({});
   const [planSidebarOpen, setPlanSidebarOpen] = useState(false);
+  const isMobileViewport = useMediaQuery("max-md");
   const shouldUsePlanSidebarSheet = useMediaQuery(RIGHT_PANEL_INLINE_LAYOUT_MEDIA_QUERY);
+  useMobileRootScrollReset(isMobileViewport);
   // Tracks whether the user explicitly dismissed the sidebar for the active turn.
   const planSidebarDismissedForTurnRef = useRef<string | null>(null);
   // When set, the thread-change reset effect will open the sidebar instead of closing it.
diff --git a/apps/web/src/components/NoActiveThreadState.tsx b/apps/web/src/components/NoActiveThreadState.tsx
index cd1f76ed2c2..c3e5ff0e054 100644
--- a/apps/web/src/components/NoActiveThreadState.tsx
+++ b/apps/web/src/components/NoActiveThreadState.tsx
@@ -5,7 +5,7 @@ import { cn } from "~/lib/utils";
 
 export function NoActiveThreadState() {
   return (
-    <SidebarInset className="h-dvh min-h-0 overflow-hidden overscroll-y-none bg-background text-foreground">
+    <SidebarInset className="h-app-viewport safe-area-top-x min-h-0 overflow-hidden overscroll-y-none bg-background text-foreground">
       <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-x-hidden bg-background">
         <header
           className={cn(
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 5c568ad5d67..635918dc344 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -58,6 +58,31 @@
   }
 }
 
+@layer utilities {
+  .h-app-viewport {
+    height: 100dvh;
+  }
+
+  @supports (height: 100svh) {
+    .h-app-viewport {
+      height: 100svh;
+    }
+  }
+
+  .safe-area-top-x {
+    box-sizing: border-box;
+    padding-top: env(safe-area-inset-top, 0px);
+    padding-left: env(safe-area-inset-left, 0px);
+    padding-right: env(safe-area-inset-right, 0px);
+  }
+
+  @media (max-width: 767px) and (pointer: coarse) {
+    .safe-area-top-x {
+      padding-top: max(env(safe-area-inset-top, 0px), 44px);
+    }
+  }
+}
+
 /* Suppress all transitions during theme changes */
 .no-transitions,
 .no-transitions *,
diff --git a/apps/web/src/routes/_chat.$environmentId.$threadId.tsx b/apps/web/src/routes/_chat.$environmentId.$threadId.tsx
index ff20673e2de..bb62a858e5f 100644
--- a/apps/web/src/routes/_chat.$environmentId.$threadId.tsx
+++ b/apps/web/src/routes/_chat.$environmentId.$threadId.tsx
@@ -238,7 +238,7 @@ function ChatThreadRouteView() {
   if (!shouldUseDiffSheet) {
     return (
       <>
-        <SidebarInset className="h-dvh  min-h-0 overflow-hidden overscroll-y-none bg-background text-foreground">
+        <SidebarInset className="h-app-viewport safe-area-top-x min-h-0 overflow-hidden overscroll-y-none bg-background text-foreground">
           <ChatView
             environmentId={threadRef.environmentId}
             threadId={threadRef.threadId}
@@ -259,7 +259,7 @@ function ChatThreadRouteView() {
 
   return (
     <>
-      <SidebarInset className="h-dvh min-h-0 overflow-hidden overscroll-y-none bg-background text-foreground">
+      <SidebarInset className="h-app-viewport safe-area-top-x min-h-0 overflow-hidden overscroll-y-none bg-background text-foreground">
         <ChatView
           environmentId={threadRef.environmentId}
           threadId={threadRef.threadId}
diff --git a/apps/web/src/routes/_chat.draft.$draftId.tsx b/apps/web/src/routes/_chat.draft.$draftId.tsx
index e7bb1d0912f..21a645fa53f 100644
--- a/apps/web/src/routes/_chat.draft.$draftId.tsx
+++ b/apps/web/src/routes/_chat.draft.$draftId.tsx
@@ -55,7 +55,7 @@ function DraftChatThreadRouteView() {
 
   if (canonicalThreadRef) {
     return (
-      <SidebarInset className="h-dvh min-h-0 overflow-hidden overscroll-y-none bg-background text-foreground">
+      <SidebarInset className="h-app-viewport safe-area-top-x min-h-0 overflow-hidden overscroll-y-none bg-background text-foreground">
         <ChatView
           environmentId={canonicalThreadRef.environmentId}
           threadId={canonicalThreadRef.threadId}
@@ -70,7 +70,7 @@ function DraftChatThreadRouteView() {
   }
 
   return (
-    <SidebarInset className="h-dvh min-h-0 overflow-hidden overscroll-y-none bg-background text-foreground">
+    <SidebarInset className="h-app-viewport safe-area-top-x min-h-0 overflow-hidden overscroll-y-none bg-background text-foreground">
       <ChatView
         draftId={draftId}
         environmentId={draftSession.environmentId}
diff --git a/apps/web/src/routes/settings.tsx b/apps/web/src/routes/settings.tsx
index 64b5e7bc684..c539aa92d3c 100644
--- a/apps/web/src/routes/settings.tsx
+++ b/apps/web/src/routes/settings.tsx
@@ -45,7 +45,7 @@ function SettingsContentLayout() {
   }, []);
 
   return (
-    <SidebarInset className="h-dvh min-h-0 overflow-hidden overscroll-y-none bg-background text-foreground isolate">
+    <SidebarInset className="h-app-viewport safe-area-top-x min-h-0 overflow-hidden overscroll-y-none bg-background text-foreground isolate">
       <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-background text-foreground">
         {!isElectron && (
           <header className="border-b border-border px-3 py-2 sm:px-5">

From 4a4726d31a4f0bf91159b0e8265b30af7e8f75af Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Wed, 29 Apr 2026 23:16:41 -0700
Subject: [PATCH 4/6] Prevent mobile composer focus scroll

Co-authored-by: codex <codex@users.noreply.github.com>
---
 apps/web/src/components/ChatView.tsx          | 40 -------------------
 .../src/components/ComposerPromptEditor.tsx   |  7 +++-
 apps/web/src/index.css                        |  6 ---
 3 files changed, 6 insertions(+), 47 deletions(-)

diff --git a/apps/web/src/components/ChatView.tsx b/apps/web/src/components/ChatView.tsx
index 4fbc62f9342..0f22ba66be3 100644
--- a/apps/web/src/components/ChatView.tsx
+++ b/apps/web/src/components/ChatView.tsx
@@ -335,44 +335,6 @@ type ChatViewProps =
       draftId: DraftId;
     };
 
-function useMobileRootScrollReset(enabled: boolean) {
-  useEffect(() => {
-    if (!enabled || typeof window === "undefined") {
-      return;
-    }
-
-    let rafId: number | null = null;
-    const resetRootScroll = () => {
-      if (rafId !== null) {
-        return;
-      }
-      rafId = window.requestAnimationFrame(() => {
-        rafId = null;
-        if (window.scrollX !== 0 || window.scrollY !== 0) {
-          window.scrollTo(0, 0);
-        }
-      });
-    };
-
-    resetRootScroll();
-    const visualViewport = window.visualViewport;
-    visualViewport?.addEventListener("resize", resetRootScroll);
-    visualViewport?.addEventListener("scroll", resetRootScroll);
-    window.addEventListener("resize", resetRootScroll);
-    window.addEventListener("focusout", resetRootScroll, true);
-
-    return () => {
-      if (rafId !== null) {
-        window.cancelAnimationFrame(rafId);
-      }
-      visualViewport?.removeEventListener("resize", resetRootScroll);
-      visualViewport?.removeEventListener("scroll", resetRootScroll);
-      window.removeEventListener("resize", resetRootScroll);
-      window.removeEventListener("focusout", resetRootScroll, true);
-    };
-  }, [enabled]);
-}
-
 interface TerminalLaunchContext {
   threadId: ThreadId;
   cwd: string;
@@ -724,9 +686,7 @@ export default function ChatView(props: ChatViewProps) {
   const [pendingUserInputQuestionIndexByRequestId, setPendingUserInputQuestionIndexByRequestId] =
     useState<Record<string, number>>({});
   const [planSidebarOpen, setPlanSidebarOpen] = useState(false);
-  const isMobileViewport = useMediaQuery("max-md");
   const shouldUsePlanSidebarSheet = useMediaQuery(RIGHT_PANEL_INLINE_LAYOUT_MEDIA_QUERY);
-  useMobileRootScrollReset(isMobileViewport);
   // Tracks whether the user explicitly dismissed the sidebar for the active turn.
   const planSidebarDismissedForTurnRef = useRef<string | null>(null);
   // When set, the thread-change reset effect will open the sidebar instead of closing it.
diff --git a/apps/web/src/components/ComposerPromptEditor.tsx b/apps/web/src/components/ComposerPromptEditor.tsx
index f889b8f6ec8..65654a258f9 100644
--- a/apps/web/src/components/ComposerPromptEditor.tsx
+++ b/apps/web/src/components/ComposerPromptEditor.tsx
@@ -1490,10 +1490,15 @@ function ComposerPromptEditorInner({
       const rootElement = editor.getRootElement();
       if (!rootElement) return;
       const boundedCursor = clampCollapsedComposerCursor(snapshotRef.current.value, nextCursor);
-      rootElement.focus();
+      const scrollX = window.scrollX;
+      const scrollY = window.scrollY;
+      rootElement.focus({ preventScroll: true });
       editor.update(() => {
         $setSelectionAtComposerOffset(boundedCursor);
       });
+      if (window.scrollX !== scrollX || window.scrollY !== scrollY) {
+        window.scrollTo(scrollX, scrollY);
+      }
       snapshotRef.current = {
         value: snapshotRef.current.value,
         cursor: boundedCursor,
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 635918dc344..7a378b2f43d 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -75,12 +75,6 @@
     padding-left: env(safe-area-inset-left, 0px);
     padding-right: env(safe-area-inset-right, 0px);
   }
-
-  @media (max-width: 767px) and (pointer: coarse) {
-    .safe-area-top-x {
-      padding-top: max(env(safe-area-inset-top, 0px), 44px);
-    }
-  }
 }
 
 /* Suppress all transitions during theme changes */

From 221a2c4be3674564858aeda85b341c1f36e92b90 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Wed, 29 Apr 2026 23:31:14 -0700
Subject: [PATCH 5/6] Keep mobile composer focus in tap gesture

Co-authored-by: codex <codex@users.noreply.github.com>
---
 apps/web/src/components/ComposerPromptEditor.tsx | 13 ++++++++++---
 apps/web/src/components/chat/ChatComposer.tsx    | 10 +++++++---
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/components/ComposerPromptEditor.tsx b/apps/web/src/components/ComposerPromptEditor.tsx
index 65654a258f9..d56cb448795 100644
--- a/apps/web/src/components/ComposerPromptEditor.tsx
+++ b/apps/web/src/components/ComposerPromptEditor.tsx
@@ -1492,13 +1492,20 @@ function ComposerPromptEditorInner({
       const boundedCursor = clampCollapsedComposerCursor(snapshotRef.current.value, nextCursor);
       const scrollX = window.scrollX;
       const scrollY = window.scrollY;
+      const restoreScroll = () => {
+        if (window.scrollX !== scrollX || window.scrollY !== scrollY) {
+          window.scrollTo(scrollX, scrollY);
+        }
+      };
       rootElement.focus({ preventScroll: true });
       editor.update(() => {
         $setSelectionAtComposerOffset(boundedCursor);
       });
-      if (window.scrollX !== scrollX || window.scrollY !== scrollY) {
-        window.scrollTo(scrollX, scrollY);
-      }
+      restoreScroll();
+      requestAnimationFrame(() => {
+        restoreScroll();
+        requestAnimationFrame(restoreScroll);
+      });
       snapshotRef.current = {
         value: snapshotRef.current.value,
         cursor: boundedCursor,
diff --git a/apps/web/src/components/chat/ChatComposer.tsx b/apps/web/src/components/chat/ChatComposer.tsx
index 0bf39c64ef1..2ec4f1c8f02 100644
--- a/apps/web/src/components/chat/ChatComposer.tsx
+++ b/apps/web/src/components/chat/ChatComposer.tsx
@@ -30,6 +30,7 @@ import {
   useRef,
   useState,
 } from "react";
+import { flushSync } from "react-dom";
 import { useQuery } from "@tanstack/react-query";
 import { useDebouncedValue } from "@tanstack/react-pacer";
 import { projectSearchEntriesQueryOptions } from "~/lib/projectReactQuery";
@@ -1838,6 +1839,9 @@ export const ChatComposer = memo(
           return;
         }
         setIsComposerFocused(false);
+        requestAnimationFrame(() => {
+          window.scrollTo(0, 0);
+        });
       });
     }, []);
 
@@ -1887,10 +1891,10 @@ export const ChatComposer = memo(
             }}
             onClick={() => {
               if (isComposerCollapsedMobile) {
-                setIsComposerFocused(true);
-                requestAnimationFrame(() => {
-                  composerEditorRef.current?.focusAtEnd();
+                flushSync(() => {
+                  setIsComposerFocused(true);
                 });
+                composerEditorRef.current?.focusAtEnd();
               }
             }}
           >

From 9e4bd6c974b8bd3d88a0c058d329fd57538e24a9 Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Wed, 29 Apr 2026 23:46:14 -0700
Subject: [PATCH 6/6] Fix mobile viewport and sidebar truncation

Co-authored-by: codex <codex@users.noreply.github.com>
---
 apps/web/src/components/Sidebar.tsx |  9 ++++---
 apps/web/src/index.css              |  8 +-----
 apps/web/src/routes/__root.tsx      | 39 +++++++++++++++++++++++++++++
 3 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 43ff82df86f..6635a0b133d 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -1949,7 +1949,7 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
         <SidebarMenuButton
           ref={isManualProjectSorting ? dragHandleProps?.setActivatorNodeRef : undefined}
           size="sm"
-          className={`gap-2 px-2 py-1.5 text-left hover:bg-accent group-hover/project-header:bg-accent group-hover/project-header:text-sidebar-accent-foreground ${
+          className={`min-w-0 gap-2 px-2 py-1.5 pr-8 text-left hover:bg-accent group-hover/project-header:bg-accent group-hover/project-header:text-sidebar-accent-foreground ${
             isManualProjectSorting ? "cursor-grab active:cursor-grabbing" : "cursor-pointer"
           }`}
           {...(isManualProjectSorting && dragHandleProps ? dragHandleProps.attributes : {})}
@@ -1982,8 +1982,11 @@ const SidebarProjectItem = memo(function SidebarProjectItem(props: SidebarProjec
             />
           )}
           <ProjectFavicon environmentId={project.environmentId} cwd={project.cwd} />
-          <span className="flex min-w-0 flex-1 items-center gap-2">
-            <span className="truncate text-xs font-medium text-foreground/90">
+          <span className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
+            <span
+              className="min-w-0 truncate text-xs font-medium text-foreground/90"
+              title={project.displayName}
+            >
               {project.displayName}
             </span>
             {project.groupedProjectCount > 1 ? (
diff --git a/apps/web/src/index.css b/apps/web/src/index.css
index 7a378b2f43d..c508a6384c6 100644
--- a/apps/web/src/index.css
+++ b/apps/web/src/index.css
@@ -60,13 +60,7 @@
 
 @layer utilities {
   .h-app-viewport {
-    height: 100dvh;
-  }
-
-  @supports (height: 100svh) {
-    .h-app-viewport {
-      height: 100svh;
-    }
+    height: var(--app-visual-viewport-height, 100dvh);
   }
 
   .safe-area-top-x {
diff --git a/apps/web/src/routes/__root.tsx b/apps/web/src/routes/__root.tsx
index 87e8667901d..ce182dd5ea1 100644
--- a/apps/web/src/routes/__root.tsx
+++ b/apps/web/src/routes/__root.tsx
@@ -97,6 +97,7 @@ function RootRouteView() {
   return (
     <ToastProvider>
       <AnchoredToastProvider>
+        <VisualViewportBootstrap />
         <AuthenticatedTracingBootstrap />
         <ServerStateBootstrap />
         <EnvironmentConnectionManagerBootstrap />
@@ -115,6 +116,44 @@ function RootRouteView() {
   );
 }
 
+function VisualViewportBootstrap() {
+  useEffect(() => {
+    const root = document.documentElement;
+    let frame: number | null = null;
+
+    const writeViewportHeight = () => {
+      if (frame !== null) {
+        window.cancelAnimationFrame(frame);
+      }
+      frame = window.requestAnimationFrame(() => {
+        frame = null;
+        root.style.setProperty(
+          "--app-visual-viewport-height",
+          `${window.visualViewport?.height ?? window.innerHeight}px`,
+        );
+      });
+    };
+
+    writeViewportHeight();
+    window.addEventListener("resize", writeViewportHeight);
+    window.addEventListener("orientationchange", writeViewportHeight);
+    window.visualViewport?.addEventListener("resize", writeViewportHeight);
+    window.visualViewport?.addEventListener("scroll", writeViewportHeight);
+
+    return () => {
+      if (frame !== null) {
+        window.cancelAnimationFrame(frame);
+      }
+      window.removeEventListener("resize", writeViewportHeight);
+      window.removeEventListener("orientationchange", writeViewportHeight);
+      window.visualViewport?.removeEventListener("resize", writeViewportHeight);
+      window.visualViewport?.removeEventListener("scroll", writeViewportHeight);
+    };
+  }, []);
+
+  return null;
+}
+
 function RootRouteErrorView({ error, reset }: ErrorComponentProps) {
   const message = errorMessage(error);
   const details = errorDetails(error);