From 422e3945fb00d53d0e5571c29638688e7db0f96f Mon Sep 17 00:00:00 2001
From: Neil <4138956+nwparker@users.noreply.github.com>
Date: Mon, 27 Jul 2026 17:44:21 -0700
Subject: [PATCH] fix(new-workspace): center agent selection in create dialog

Pin the Agent combobox mark to 14px, drop residual button padding, and
use a full-width min-w-0 trigger so icon, label, and chevron align with
Project/Name in the new worktree dialog.
---
 .../components/NewWorkspaceComposerCard.tsx   |  6 ++--
 .../components/agent/AgentCombobox.test.tsx   | 20 +++++++++++++
 .../src/components/agent/AgentCombobox.tsx    | 30 ++++++++++++-------
 3 files changed, 44 insertions(+), 12 deletions(-)

diff --git a/src/renderer/src/components/NewWorkspaceComposerCard.tsx b/src/renderer/src/components/NewWorkspaceComposerCard.tsx
index 062714ff678..0fdcc3459ef 100644
--- a/src/renderer/src/components/NewWorkspaceComposerCard.tsx
+++ b/src/renderer/src/components/NewWorkspaceComposerCard.tsx
@@ -1421,7 +1421,7 @@ export default function NewWorkspaceComposerCard({
           </div>
         </div>
 
-        <div className="space-y-1" data-contextual-tour-target="workspace-creation-agent">
+        <div className="min-w-0 space-y-1" data-contextual-tour-target="workspace-creation-agent">
           <div className="flex items-center justify-between gap-2">
             <label className="text-xs font-medium text-muted-foreground">
               {translate('auto.components.NewWorkspaceComposerCard.01d1e8f601', 'Agent')}
@@ -1459,7 +1459,9 @@ export default function NewWorkspaceComposerCard({
             onOpenManageAgents={onOpenAgentSettings}
             defaultAgent={defaultTuiAgent}
             onSetDefault={handleSetDefaultAgent}
-            triggerClassName="h-9 w-full border-input text-sm focus:border-ring focus:ring-[3px] focus:ring-ring/50"
+            // Why: match Project/Run-on — full-width form row, no 260px min that can overflow the dialog column.
+            allowNarrowTrigger
+            triggerClassName="h-9 w-full min-w-0 border-input text-sm focus:border-ring focus:ring-[3px] focus:ring-ring/50"
             onTriggerEnter={createDisabled ? undefined : onCreate}
           />
         </div>
diff --git a/src/renderer/src/components/agent/AgentCombobox.test.tsx b/src/renderer/src/components/agent/AgentCombobox.test.tsx
index a5c3e205e12..695abdc4729 100644
--- a/src/renderer/src/components/agent/AgentCombobox.test.tsx
+++ b/src/renderer/src/components/agent/AgentCombobox.test.tsx
@@ -21,6 +21,26 @@ describe('AgentCombobox', () => {
     expect(markup).toContain('flex-1')
   })
 
+  it('centers the selected agent mark and label inside a full-width form trigger', () => {
+    const markup = renderToStaticMarkup(
+      <AgentCombobox
+        agents={AGENT_CATALOG}
+        value="codex"
+        onValueChange={vi.fn()}
+        allowNarrowTrigger
+        triggerClassName="h-9 w-full min-w-0"
+      />
+    )
+
+    expect(markup).toContain('Codex')
+    expect(markup).not.toContain('!min-w-[260px]')
+    expect(markup).toContain('min-w-0 w-full')
+    expect(markup).toContain('leading-none')
+    expect(markup).toContain('size-3.5 shrink-0')
+    // Why: React HTML-escapes `[`/`&` in class strings during static markup.
+    expect(markup).toContain('size-3.5!')
+  })
+
   it('supports an Agent-only empty state without presenting a blank terminal', () => {
     const markup = renderToStaticMarkup(
       <AgentCombobox
diff --git a/src/renderer/src/components/agent/AgentCombobox.tsx b/src/renderer/src/components/agent/AgentCombobox.tsx
index 36b231b934d..7ca68d78293 100644
--- a/src/renderer/src/components/agent/AgentCombobox.tsx
+++ b/src/renderer/src/components/agent/AgentCombobox.tsx
@@ -86,10 +86,14 @@ function renderItem({
       onSelect={onSelect}
       className="items-center gap-2 px-3 py-1.5"
     >
-      <Check className={cn('size-4 text-foreground', isChecked ? 'opacity-100' : 'opacity-0')} />
+      <Check
+        className={cn('size-4 shrink-0 text-foreground', isChecked ? 'opacity-100' : 'opacity-0')}
+      />
       <span className="inline-flex min-w-0 flex-1 items-center gap-1.5">
-        {icon}
-        <span className="truncate">{label}</span>
+        <span className="inline-flex size-3.5 shrink-0 items-center justify-center [&_img]:size-3.5 [&_svg]:size-3.5!">
+          {icon}
+        </span>
+        <span className="truncate leading-none">{label}</span>
       </span>
     </CommandItem>
   )
@@ -268,7 +272,9 @@ export default function AgentCombobox({
   )
 
   return (
-    <div className="flex w-full items-center">
+    // Why: min-w-0 lets full-width form rows shrink; plain flex+items-center left the
+    // trigger free to overflow its dialog column and look misaligned with Project/Name.
+    <div className="min-w-0 w-full">
       <Popover open={open} onOpenChange={handleOpenChange}>
         <PopoverTrigger asChild>
           <Button
@@ -281,7 +287,8 @@ export default function AgentCombobox({
             className={cn(
               // Why: callers sometimes pass `min-w-0` for grid layouts, but
               // the compact trigger still needs room for "GitHub Copilot".
-              'h-8 justify-between px-3 text-xs font-normal',
+              // py-0 clears the default size's py-2 so icon+label center in h-8/h-9.
+              'h-8 justify-between px-3 py-0 text-xs font-normal',
               triggerClassName,
               !allowNarrowTrigger && TRIGGER_MIN_WIDTH_CLASS
             )}
@@ -289,19 +296,22 @@ export default function AgentCombobox({
           >
             {selectedAgent ? (
               <span className="inline-flex min-w-0 flex-1 items-center gap-1.5">
-                <AgentIcon agent={selectedAgent.id} />
-                <span className="truncate">{selectedAgent.label}</span>
+                {/* Why: pin a 14px box so Button's [&_svg]:size-4 cannot inflate agent marks. */}
+                <span className="inline-flex size-3.5 shrink-0 items-center justify-center [&_img]:size-3.5 [&_svg]:size-3.5!">
+                  <AgentIcon agent={selectedAgent.id} size={14} />
+                </span>
+                <span className="truncate leading-none">{selectedAgent.label}</span>
               </span>
             ) : (
               <span className="inline-flex min-w-0 flex-1 items-center gap-1.5">
-                <Terminal className="size-3.5" />
-                <span className="truncate">
+                <Terminal className="size-3.5 shrink-0" />
+                <span className="truncate leading-none">
                   {emptyLabel ??
                     translate('auto.components.agent.AgentCombobox.986f946354', 'Blank Terminal')}
                 </span>
               </span>
             )}
-            <ChevronsUpDown className="size-3.5 opacity-50" />
+            <ChevronsUpDown className="size-3.5 shrink-0 opacity-50" />
           </Button>
         </PopoverTrigger>
         <PopoverContent