From 3f82dd21fe35a763908b662b06ab7fff8e1072e5 Mon Sep 17 00:00:00 2001
From: Shantur Rathore <i@shantur.com>
Date: Tue, 17 Feb 2026 18:04:37 +0000
Subject: [PATCH] fix(ui): reduce prompt expanded height on mobile

Use the existing instance shell layout mode to cap expanded prompt rows to 10 on phone/tablet while keeping 15 on desktop.
---
 packages/ui/src/components/instance/instance-shell2.tsx | 2 ++
 packages/ui/src/components/prompt-input.tsx             | 2 +-
 packages/ui/src/components/prompt-input/types.ts        | 3 +++
 packages/ui/src/components/session/session-view.tsx     | 2 ++
 4 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/instance/instance-shell2.tsx b/packages/ui/src/components/instance/instance-shell2.tsx
index 0019db69..d89bf7c4 100644
--- a/packages/ui/src/components/instance/instance-shell2.tsx
+++ b/packages/ui/src/components/instance/instance-shell2.tsx
@@ -124,6 +124,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
 
   const isPhoneLayout = createMemo(() => layoutMode() === "phone")
   const mobileFullscreen = createMemo(() => props.mobileFullscreenMode && isPhoneLayout())
+  const compactPromptLayout = createMemo(() => layoutMode() !== "desktop")
   const leftPinningSupported = createMemo(() => layoutMode() !== "phone")
   const rightPinningSupported = createMemo(() => layoutMode() !== "phone")
 
@@ -824,6 +825,7 @@ const InstanceShell2: Component<InstanceShellProps> = (props) => {
                           instanceFolder={props.instance.folder}
                           escapeInDebounce={props.escapeInDebounce}
                           isPhoneLayout={isPhoneLayout()}
+                          compactPromptLayout={compactPromptLayout()}
                           showSidebarToggle={showEmbeddedSidebarToggle()}
                           onSidebarToggle={() => setLeftOpen(true)}
                           forceCompactStatusLayout={showEmbeddedSidebarToggle()}
diff --git a/packages/ui/src/components/prompt-input.tsx b/packages/ui/src/components/prompt-input.tsx
index f4f834c1..a52b0f8c 100644
--- a/packages/ui/src/components/prompt-input.tsx
+++ b/packages/ui/src/components/prompt-input.tsx
@@ -455,7 +455,7 @@ export default function PromptInput(props: PromptInputProps) {
                 onFocus={() => setIsFocused(true)}
                 onBlur={() => setIsFocused(false)}
                 disabled={props.disabled}
-                rows={expandState() === "expanded" ? 15 : 3}
+                rows={expandState() === "expanded" ? (props.compactLayout ? 10 : 15) : 3}
                 spellcheck={false}
                 autocorrect="off"
                 autoCapitalize="off"
diff --git a/packages/ui/src/components/prompt-input/types.ts b/packages/ui/src/components/prompt-input/types.ts
index b4dc44c9..e1452ec3 100644
--- a/packages/ui/src/components/prompt-input/types.ts
+++ b/packages/ui/src/components/prompt-input/types.ts
@@ -20,6 +20,9 @@ export interface PromptInputProps {
 
   // Used to scope global "type-to-focus" behavior.
   isActive?: boolean
+
+  // Phone/tablet layouts should keep the expanded prompt more compact.
+  compactLayout?: boolean
   onSend: (prompt: string, attachments: Attachment[]) => Promise<void>
   onRunShell?: (command: string) => Promise<void>
   disabled?: boolean
diff --git a/packages/ui/src/components/session/session-view.tsx b/packages/ui/src/components/session/session-view.tsx
index 484546e3..58adfede 100644
--- a/packages/ui/src/components/session/session-view.tsx
+++ b/packages/ui/src/components/session/session-view.tsx
@@ -29,6 +29,7 @@ interface SessionViewProps {
   instanceFolder: string
   escapeInDebounce: boolean
   isPhoneLayout?: boolean
+  compactPromptLayout?: boolean
   showSidebarToggle?: boolean
   onSidebarToggle?: () => void
   forceCompactStatusLayout?: boolean
@@ -322,6 +323,7 @@ export const SessionView: Component<SessionViewProps> = (props) => {
                 instanceFolder={props.instanceFolder}
                 sessionId={activeSession.id}
                 isActive={props.isActive}
+                compactLayout={props.compactPromptLayout}
                 onSend={handleSendMessage}
                 onRunShell={handleRunShell}
                 escapeInDebounce={props.escapeInDebounce}