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>
     );
 };