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.
This commit is contained in:
Neil
2026-07-27 17:44:21 -07:00
parent c25a130236
commit 422e3945fb
3 changed files with 44 additions and 12 deletions
@@ -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>
@@ -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
@@ -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