From cc3d1bd63ca5a86e3f5d418414abf863d119260a Mon Sep 17 00:00:00 2001
From: Robert Hamilton <rghamilton3@pm.me>
Date: Tue, 26 May 2026 12:46:30 -0500
Subject: [PATCH] fix: improve todo send dialog model picker (#1426)

* fix: improve todo send dialog model picker

* fix: truncate long model selector labels

---------

Co-authored-by: Bohdan Triapitsyn <artmore@protonmail.com>
---
 .../sections/agents/ModelSelector.tsx         | 14 +++--
 .../src/components/session/TodoSendDialog.tsx | 51 +++++++++++--------
 2 files changed, 40 insertions(+), 25 deletions(-)

diff --git a/packages/ui/src/components/sections/agents/ModelSelector.tsx b/packages/ui/src/components/sections/agents/ModelSelector.tsx
index ae2175fb..4603500a 100644
--- a/packages/ui/src/components/sections/agents/ModelSelector.tsx
+++ b/packages/ui/src/components/sections/agents/ModelSelector.tsx
@@ -23,6 +23,8 @@ interface ModelSelectorProps {
     className?: string;
     allowedProviderIds?: string[];
     placeholder?: string;
+    tooltipsEnabled?: boolean;
+    dropdownPortalToBody?: boolean;
 }
 
 export const ModelSelector: React.FC<ModelSelectorProps> = ({
@@ -32,6 +34,8 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
     className,
     allowedProviderIds,
     placeholder,
+    tooltipsEnabled = true,
+    dropdownPortalToBody = false,
 }) => {
     const { t } = useI18n();
     const { isReady, isUnavailable } = useOpenCodeReadiness();
@@ -103,7 +107,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
             includeNotSelected
             onSelectNone={handleSelectNone}
             onEscape={closePicker}
-            tooltipsEnabled={isActuallyMobile ? isMobilePanelOpen : isDropdownOpen}
+            tooltipsEnabled={tooltipsEnabled && (isActuallyMobile ? isMobilePanelOpen : isDropdownOpen)}
             isFavorite={(entry) => isFavoriteModel(entry.providerID, entry.modelID)}
             onToggleFavorite={(entry) => toggleFavoriteModel(entry.providerID, entry.modelID)}
         />
@@ -152,7 +156,7 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
         <DropdownMenu open={isReady && isDropdownOpen} onOpenChange={isReady ? setIsDropdownOpen : undefined}>
             <DropdownMenuTrigger asChild>
                 <div className={cn(
-                    'border-input data-[placeholder]:text-muted-foreground flex items-center justify-between gap-2 rounded-lg border bg-transparent px-2 py-2 typography-ui-label whitespace-nowrap shadow-none outline-none hover:bg-interactive-hover data-[popup-open]:bg-interactive-active h-6 w-fit',
+                    'border-input data-[placeholder]:text-muted-foreground flex min-w-0 items-center justify-between gap-2 rounded-lg border bg-transparent px-2 py-2 typography-ui-label whitespace-nowrap shadow-none outline-none hover:bg-interactive-hover data-[popup-open]:bg-interactive-active h-6 w-fit',
                     !isReady && 'opacity-60 cursor-not-allowed',
                     className,
                 )}>
@@ -165,14 +169,14 @@ export const ModelSelector: React.FC<ModelSelectorProps> = ({
                         </>
                     ) : (
                         <>
-                            {providerId ? <ProviderLogo providerId={providerId} className="h-3.5 w-3.5 flex-shrink-0" /> : <Icon name="pencil-ai" className="h-3.5 w-3.5 text-muted-foreground" />}
-                            <span className="typography-ui-label font-normal whitespace-nowrap text-foreground">{triggerLabel}</span>
+                            {providerId ? <ProviderLogo providerId={providerId} className="h-3.5 w-3.5 flex-shrink-0" /> : <Icon name="pencil-ai" className="h-3.5 w-3.5 flex-shrink-0 text-muted-foreground" />}
+                            <span className="typography-ui-label min-w-0 truncate font-normal text-foreground">{triggerLabel}</span>
                         </>
                     )}
                     <Icon name="arrow-down-s" className="h-4 w-4 flex-shrink-0 text-muted-foreground/50" />
                 </div>
             </DropdownMenuTrigger>
-            <DropdownMenuContent className="w-[min(380px,calc(100vw-2rem))] p-0 flex flex-col" align="start">
+            <DropdownMenuContent className="w-[min(380px,calc(100vw-2rem))] p-0 flex flex-col" align="start" portalToBody={dropdownPortalToBody}>
                 {picker}
             </DropdownMenuContent>
         </DropdownMenu>
diff --git a/packages/ui/src/components/session/TodoSendDialog.tsx b/packages/ui/src/components/session/TodoSendDialog.tsx
index 483ec084..8d8c4add 100644
--- a/packages/ui/src/components/session/TodoSendDialog.tsx
+++ b/packages/ui/src/components/session/TodoSendDialog.tsx
@@ -196,30 +196,41 @@ export function TodoSendDialog(props: TodoSendDialogProps) {
 
   return (
     <Dialog open={open} onOpenChange={(nextOpen) => { if (!submitting) onOpenChange(nextOpen); }}>
-      <DialogContent className="max-w-lg">
+      <DialogContent className="max-w-2xl overflow-visible">
         <DialogHeader>
           <DialogTitle>{title}</DialogTitle>
         </DialogHeader>
 
-        <div className="flex flex-wrap items-center gap-x-4 gap-y-2">
-          <ModelSelector
-            providerId={execution.providerID}
-            modelId={execution.modelID}
-            onChange={(providerID, modelID) => {
-              setExecution((prev) => ({ ...prev, providerID, modelID, variant: '' }));
-            }}
-          />
-          <ThinkingPill
-            value={execution.variant}
-            options={variantOptions}
-            disabled={!hasVariantOptions}
-            onChange={(variant) => setExecution((prev) => ({ ...prev, variant }))}
-          />
-          <AgentSelector
-            agentName={execution.agent}
-            filter={agentFilter}
-            onChange={(agent) => setExecution((prev) => ({ ...prev, agent }))}
-          />
+        <div className="grid gap-4 sm:grid-cols-[minmax(0,1fr)_auto_auto]">
+          <div className="flex min-w-0 flex-col gap-1.5">
+            <span className="typography-meta font-medium text-muted-foreground">{t('chat.modelControls.model')}</span>
+            <ModelSelector
+              providerId={execution.providerID}
+              modelId={execution.modelID}
+              className="w-full justify-between"
+              dropdownPortalToBody
+              onChange={(providerID, modelID) => {
+                setExecution((prev) => ({ ...prev, providerID, modelID, variant: '' }));
+              }}
+            />
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <span className="typography-meta font-medium text-muted-foreground">{t('sessions.scheduledTasks.editor.thinkingLevel.label')}</span>
+            <ThinkingPill
+              value={execution.variant}
+              options={variantOptions}
+              disabled={!hasVariantOptions}
+              onChange={(variant) => setExecution((prev) => ({ ...prev, variant }))}
+            />
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <span className="typography-meta font-medium text-muted-foreground">{t('sessions.scheduledTasks.editor.agent.label')}</span>
+            <AgentSelector
+              agentName={execution.agent}
+              filter={agentFilter}
+              onChange={(agent) => setExecution((prev) => ({ ...prev, agent }))}
+            />
+          </div>
         </div>
 
         <div className="flex items-center justify-end gap-2">