From d0df6ccd711a5060c358de897ecc2c21093ead80 Mon Sep 17 00:00:00 2001
From: Nelson Pires <nelsonpires.sn@gmail.com>
Date: Sat, 7 Feb 2026 06:30:08 -0300
Subject: [PATCH] Fix mobile chat input layout (#344)

* refactor(chat): adjust mobile controls layout

Improve alignment of mobile model and agent buttons with action buttons
Constrain mobile controls to a max width to prevent overflow on small screens

* fix: improve MobileAgentButton mobile interaction

Replace touch-none with touch-pan-x to enable horizontal swipe
Wrap the agent label in a scrollable container to prevent truncation

* fix(ui): allow horizontal scroll for model label

Enable horizontal scrolling for long model labels on mobile
Prevent truncation by letting the label overflow horizontally
Improve visibility by keeping the full label accessible without clipping
---
 packages/ui/src/components/chat/ChatInput.tsx        | 12 ++++++++----
 .../ui/src/components/chat/MobileAgentButton.tsx     |  6 ++++--
 .../ui/src/components/chat/MobileModelButton.tsx     |  4 +++-
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/components/chat/ChatInput.tsx b/packages/ui/src/components/chat/ChatInput.tsx
index 46314faf..5addce2e 100644
--- a/packages/ui/src/components/chat/ChatInput.tsx
+++ b/packages/ui/src/components/chat/ChatInput.tsx
@@ -1853,10 +1853,14 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
                                     <div className="flex items-center gap-x-1">
                                         {attachmentsControls}
                                     </div>
-                                    <div className="flex items-center flex-shrink-0 gap-x-1">
-                                        <MobileModelButton onOpenModel={handleOpenMobileControls} />
-                                        <MobileAgentButton onCycleAgent={handleCycleAgent} onOpenAgentPanel={() => setMobileControlsPanel('agent')} />
-                                        {actionButtons}
+                                    <div className="flex items-center min-w-0 gap-x-1 justify-end">
+                                        <div className="flex items-center gap-x-1 min-w-0 max-w-[60vw] flex-shrink">
+                                            <MobileModelButton onOpenModel={handleOpenMobileControls} className="min-w-0 flex-shrink" />
+                                            <MobileAgentButton onCycleAgent={handleCycleAgent} onOpenAgentPanel={() => setMobileControlsPanel('agent')} className="min-w-0 flex-shrink" />
+                                        </div>
+                                        <div className="flex items-center gap-x-1 flex-shrink-0">
+                                            {actionButtons}
+                                        </div>
                                     </div>
                                 </div>
                                 <ModelControls
diff --git a/packages/ui/src/components/chat/MobileAgentButton.tsx b/packages/ui/src/components/chat/MobileAgentButton.tsx
index ce094803..1f69c8da 100644
--- a/packages/ui/src/components/chat/MobileAgentButton.tsx
+++ b/packages/ui/src/components/chat/MobileAgentButton.tsx
@@ -72,7 +72,7 @@ export const MobileAgentButton: React.FC<MobileAgentButtonProps> = ({ onCycleAge
                 'rounded-lg border border-border/50 px-1.5',
                 'typography-micro font-medium',
                 'focus:outline-none hover:bg-[var(--interactive-hover)]',
-                'touch-none',
+                'touch-pan-x',
                 className
             )}
             style={{
@@ -83,7 +83,9 @@ export const MobileAgentButton: React.FC<MobileAgentButtonProps> = ({ onCycleAge
             }}
             title={agentLabel}
         >
-            <span className="truncate">{agentLabel}</span>
+            <span className="min-w-0 max-w-full overflow-x-auto whitespace-nowrap scrollbar-hidden">
+                {agentLabel}
+            </span>
         </button>
     );
 };
diff --git a/packages/ui/src/components/chat/MobileModelButton.tsx b/packages/ui/src/components/chat/MobileModelButton.tsx
index 971d31c3..04b316ee 100644
--- a/packages/ui/src/components/chat/MobileModelButton.tsx
+++ b/packages/ui/src/components/chat/MobileModelButton.tsx
@@ -27,7 +27,9 @@ export const MobileModelButton: React.FC<MobileModelButtonProps> = ({ onOpenMode
             style={{ height: '26px', maxHeight: '26px', minHeight: '26px' }}
             title={modelLabel}
         >
-            <span className="min-w-0 truncate">{modelLabel}</span>
+            <span className="min-w-0 max-w-full overflow-x-auto whitespace-nowrap scrollbar-hidden">
+                {modelLabel}
+            </span>
         </button>
     );
 };