Mobile model selector placement and alignment

frontend/src/components/ui/Chat/ChatInput.tsx

@@ -1747,6 +1747,14 @@ export const ChatInput = ({
   const hasTopLeftAccessoryOverride =
     componentRegistry.ChatTopLeftAccessory !== null;
 
+  // Whether the model selector should render at all. When the controls are
+  // collapsed into the unified "+" menu (mobile / add-in), the selector is
+  // rendered in the left control group so it left-aligns next to the "+";
+  // otherwise it stays in the right group, right-aligned next to Send.
+  const showModelSelector =
+    !hasTopLeftAccessoryOverride &&
+    !(isAudioMode && !showModelSelectorInAudioMode);
+
   const shellWrapperStyle = {
     maxWidth: "var(--theme-layout-chat-input-max-width)",
   } as const;
@@ -2064,6 +2072,16 @@ export const ChatInput = ({
                     )}
                   </>
                 ))}
+              {useUnifiedMobileMenu && showModelSelector && (
+                <ModelSelector
+                  availableModels={availableModels}
+                  selectedModel={selectedModel}
+                  onModelChange={setSelectedModel}
+                  disabled={!isSelectionReady}
+                  align="left"
+                  className="ms-[var(--theme-spacing-control-gap)]"
+                />
+              )}
             </div>
 
             <div className="flex min-w-0 flex-wrap items-center gap-[var(--theme-spacing-control-gap)]">
@@ -2091,15 +2109,14 @@ export const ChatInput = ({
                   {t`Exit audio mode`}
                 </Button>
               )}
-              {!hasTopLeftAccessoryOverride &&
-                !(isAudioMode && !showModelSelectorInAudioMode) && (
-                  <ModelSelector
-                    availableModels={availableModels}
-                    selectedModel={selectedModel}
-                    onModelChange={setSelectedModel}
-                    disabled={!isSelectionReady}
-                  />
-                )}
+              {!useUnifiedMobileMenu && showModelSelector && (
+                <ModelSelector
+                  availableModels={availableModels}
+                  selectedModel={selectedModel}
+                  onModelChange={setSelectedModel}
+                  disabled={!isSelectionReady}
+                />
+              )}
               {isAudioMode &&
                 isPendingResponse &&
                 isConversationalAudioActive &&

frontend/src/components/ui/Chat/ModelSelector.tsx

@@ -28,6 +28,13 @@ interface ModelSelectorProps {
   disabled?: boolean;
   /** Additional CSS classes */
   className?: string;
+  /**
+   * Which edge the dropdown menu aligns to. Defaults to "right" (the selector
+   * normally sits at the right edge of the input toolbar). Set to "left" when
+   * the selector is rendered on the left (e.g. the collapsed mobile/add-in
+   * layout) so the menu opens flush-left instead of clipping.
+   */
+  align?: "left" | "right";
 }
 
 function resolveModelDescription(model: ChatModel): string | null {
@@ -98,6 +105,7 @@ export const ModelSelector = ({
   onClearSelection,
   disabled = false,
   className = "",
+  align = "right",
 }: ModelSelectorProps) => {
   // Keep this marker so Lingui extracts the dynamic model description keys.
   const _modelDescriptionMarker = t`chat_models.<chat-provider-id>.description`;
@@ -175,7 +183,7 @@ export const ModelSelector = ({
     <div className={`flex items-center ${className}`}>
       <DropdownMenu
         items={dropdownItems}
-        align="right"
+        align={align}
         onOpenChange={setIsDropdownOpen}
         matchContentWidth
         triggerButtonVariant="secondary"