From 2952625c8e385f4040034ec4c7c8c95383fd9bb8 Mon Sep 17 00:00:00 2001
From: bdart <dfiebig@bdart.de>
Date: Sat, 27 Jun 2026 16:46:06 +0200
Subject: [PATCH] move to the left on mobile

---
 frontend/src/components/ui/Chat/ChatInput.tsx | 35 ++++++++++++++-----
 .../src/components/ui/Chat/ModelSelector.tsx  | 10 +++++-
 2 files changed, 35 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/ui/Chat/ChatInput.tsx b/frontend/src/components/ui/Chat/ChatInput.tsx
index 8dbfb96f1..bc3b8e1cb 100644
--- a/frontend/src/components/ui/Chat/ChatInput.tsx
+++ b/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 &&
diff --git a/frontend/src/components/ui/Chat/ModelSelector.tsx b/frontend/src/components/ui/Chat/ModelSelector.tsx
index 4d0abff2b..2a6e2a132 100644
--- a/frontend/src/components/ui/Chat/ModelSelector.tsx
+++ b/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"