feat: enhance mobile view for model controls

CHANGELOG.md

@@ -4,7 +4,12 @@ All notable changes to this project will be documented in this file.
 
 ## [Unreleased]
 
+
+## [1.1.4] - 2025-12-15
+
 - Flexoki themes for Shiki syntax highlighting for consistency with the app color schema.
+- Enchanced VSCode extension theming with editor themes
+- Fixed mobile view model/agent selection
 
 
 ## [1.1.3] - 2025-12-14

packages/ui/src/components/chat/ChatInput.tsx

@@ -870,9 +870,10 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
                                 <div className="flex items-center flex-shrink-0 gap-x-1">
                                     {attachmentsControls}
                                 </div>
-                                <div className="flex-1" />
+                                <div className="flex flex-1 items-center justify-end gap-x-1 min-w-0">
-                                <div className="flex items-center gap-x-1 min-w-0">
+                                    <div className="flex flex-1 min-w-0 justify-end overflow-hidden">
-                                    <ModelControls className={cn('flex items-center justify-end min-w-0')} />
+                                        <ModelControls className={cn('w-full flex items-center justify-end min-w-0')} />
+                                    </div>
                                     {actionButton}
                                 </div>
                             </div>

packages/ui/src/components/chat/ModelControls.tsx

@@ -1473,7 +1473,6 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
                                 <div
                                     className={cn(
                                         'model-controls__model-trigger flex items-center gap-1.5 cursor-pointer hover:opacity-70 min-w-0',
-                                        !isDesktopRuntime && 'flex-1',
                                         buttonHeight
                                     )}
                                 >
@@ -1494,7 +1493,7 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
                                             'model-controls__model-label',
                                             controlTextSize,
                                             'font-medium whitespace-nowrap text-foreground truncate min-w-0',
-                                            isDesktopRuntime ? 'max-w-[260px]' : 'flex-1'
+                                            'max-w-[260px]'
                                         )}
                                     >
                                         {getCurrentModelDisplayName()}
@@ -1610,7 +1609,8 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
                         onTouchEnd={handleLongPressEnd}
                         onTouchCancel={handleLongPressEnd}
                         className={cn(
-                            'model-controls__model-trigger flex items-center gap-1.5 min-w-0 focus:outline-none flex-1',
+                            'model-controls__model-trigger flex items-center gap-1.5 min-w-0 focus:outline-none',
+                            isMobile && 'flex-1',
                             'cursor-pointer hover:opacity-70',
                             buttonHeight
                         )}
@@ -1623,7 +1623,12 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
                         ) : (
                             <RiPencilAiLine className={cn(controlIconSize, 'text-muted-foreground')} />
                         )}
-                        <span className="model-controls__model-label typography-micro font-medium truncate min-w-0 flex-1">
+                        <span
+                            className={cn(
+                                'model-controls__model-label typography-micro font-medium truncate min-w-0',
+                                isMobile ? 'flex-1' : 'max-w-[220px]',
+                            )}
+                        >
                             {getCurrentModelDisplayName()}
                         </span>
                     </button>
@@ -1961,7 +1966,14 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
         );
     };
 
-    const inlineClassName = cn('@container/model-controls flex items-center min-w-0', inlineGapClass, className);
+    const inlineClassName = cn(
+        '@container/model-controls flex items-center min-w-0',
+        inlineGapClass,
+        // Only force full-width + truncation behaviors on true mobile layouts.
+        // VS Code also uses "compact" mode, but should keep its right-aligned inline sizing.
+        isMobile && 'w-full',
+        className,
+    );
 
     return (
         <>
@@ -1969,12 +1981,16 @@ export const ModelControls: React.FC<ModelControlsProps> = ({ className }) => {
                 <div
                     className={cn(
                         'flex items-center min-w-0',
-                        !isCompact ? (isDesktopRuntime ? 'flex-1 min-w-0 justify-end' : 'flex-1 min-w-0') : undefined
+                        isMobile
+                            ? 'flex-1 min-w-0 overflow-hidden'
+                            : (isCompact
+                                ? 'flex-1 min-w-0 justify-end'
+                                : 'flex-1 min-w-0 justify-end')
                     )}
                 >
                     {renderModelSelector()}
                 </div>
-                <div className={cn('flex items-center min-w-0', inlineGapClass)}>
+                <div className={cn('flex items-center min-w-0', inlineGapClass, isMobile && 'flex-shrink-0')}>
                     {renderAgentSelector()}
                 </div>
             </div>

packages/ui/src/index.css

@@ -1266,19 +1266,32 @@ html:not(.dark) .chat-scroll {
   font-size: inherit !important;
 }
 
-/* Model/agent controls: collapse labels in narrow containers (mobile + VSCode side panel). */
+/* Model/agent controls: agent label hides before model label. */
-@container model-controls (max-width: 15rem) {
+@container model-controls (max-width: 11rem) {
   .model-controls__agent-label {
     display: none;
   }
 }
 
-@container model-controls (max-width: 12rem) {
+@container model-controls (max-width: 9rem) {
   .model-controls__model-label {
     display: none;
   }
 }
 
+/* VS Code side panel: collapse earlier to save horizontal space. */
+@container model-controls (max-width: 9rem) {
+  :root.vscode-runtime .model-controls__agent-label {
+    display: none;
+  }
+}
+
+@container model-controls (max-width: 10rem) {
+  :root.vscode-runtime .model-controls__model-label {
+    display: none;
+  }
+}
+
 /* Text font: IBM Plex Sans */
 .streamdown-content {
   font-family: var(--font-sans);