From 2ec1ec36764401bf52232d10e6cb741157dabae2 Mon Sep 17 00:00:00 2001
From: Andrew Thal <467872+athal7@users.noreply.github.com>
Date: Sun, 1 Feb 2026 20:10:52 -0600
Subject: [PATCH] fix(app): mobile prompt input buttons overflow on narrow
 viewports

- Use tighter gap spacing on mobile (gap-1 vs gap-2 on desktop)
- Add shrink-0 to prevent buttons from compressing
- Add min-w-0 to left section to allow proper flex shrinking
- Hide text labels on mobile for model and thinking selectors
- Remove absolute positioning from right button group

Tested at 320px (iPhone SE) and 375px (iPhone) viewports.

Fixes #11613
---
 packages/app/src/components/prompt-input.tsx | 28 +++++++++++++-------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/packages/app/src/components/prompt-input.tsx b/packages/app/src/components/prompt-input.tsx
index 2b63b6f5fd3..f7192857184 100644
--- a/packages/app/src/components/prompt-input.tsx
+++ b/packages/app/src/components/prompt-input.tsx
@@ -1922,7 +1922,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
           </Show>
         </div>
         <div class="relative p-3 flex items-center justify-between">
-          <div class="flex items-center justify-start gap-2">
+          <div class="flex items-center justify-start gap-1 sm:gap-2 min-w-0">
             <Switch>
               <Match when={store.mode === "shell"}>
                 <div class="flex items-center gap-2 px-2 h-6">
@@ -1941,7 +1941,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                     options={local.agent.list().map((agent) => agent.name)}
                     current={local.agent.current()?.name ?? ""}
                     onSelect={local.agent.set}
-                    class="capitalize"
+                    class="capitalize shrink-0"
                     variant="ghost"
                     gutter={12}
                   />
@@ -1957,13 +1957,15 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                       <Button
                         as="div"
                         variant="ghost"
-                        class="px-2"
+                        class="px-2 shrink-0"
                         onClick={() => dialog.show(() => <DialogSelectModelUnpaid />)}
                       >
                         <Show when={local.model.current()?.provider?.id}>
                           <ProviderIcon id={local.model.current()!.provider.id as IconName} class="size-4 shrink-0" />
                         </Show>
-                        {local.model.current()?.name ?? language.t("dialog.model.select.title")}
+                        <span class="hidden sm:inline">
+                          {local.model.current()?.name ?? language.t("dialog.model.select.title")}
+                        </span>
                         <MorphChevron
                           expanded={!!dialog.active?.id && dialog.active.id.startsWith("select-model-unpaid")}
                         />
@@ -1976,13 +1978,19 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                     title={language.t("command.model.choose")}
                     keybind={command.keybind("model.choose")}
                   >
-                    <ModelSelectorPopover triggerAs={Button} triggerProps={{ variant: "ghost" }} gutter={12}>
+                    <ModelSelectorPopover
+                      triggerAs={Button}
+                      triggerProps={{ variant: "ghost", class: "shrink-0" }}
+                      gutter={12}
+                    >
                       {(open) => (
                         <>
                           <Show when={local.model.current()?.provider?.id}>
                             <ProviderIcon id={local.model.current()!.provider.id as IconName} class="size-4 shrink-0" />
                           </Show>
-                          {local.model.current()?.name ?? language.t("dialog.model.select.title")}
+                          <span class="hidden sm:inline">
+                            {local.model.current()?.name ?? language.t("dialog.model.select.title")}
+                          </span>
                           <MorphChevron expanded={open} class="text-text-weak" />
                         </>
                       )}
@@ -1998,13 +2006,15 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
                     <Button
                       data-action="model-variant-cycle"
                       variant="ghost"
-                      class="text-text-strong text-12-regular"
+                      class="text-text-strong text-12-regular shrink-0"
                       onClick={() => local.model.variant.cycle()}
                     >
                       <Show when={local.model.variant.list().length > 1}>
                         <ReasoningIcon percentage={reasoningPercentage()} size={16} strokeWidth={1.25} />
                       </Show>
-                      <CycleLabel value={currrentModelVariant()} />
+                      <span class="hidden sm:inline">
+                        <CycleLabel value={currrentModelVariant()} />
+                      </span>
                     </Button>
                   </TooltipKeybind>
                 </Show>
@@ -2040,7 +2050,7 @@ export const PromptInput: Component<PromptInputProps> = (props) => {
               </Match>
             </Switch>
           </div>
-          <div class="flex items-center gap-1 absolute right-3 bottom-3">
+          <div class="flex items-center gap-1 shrink-0">
             <input
               ref={fileInputRef}
               type="file"