From 158ce0111720cec599c13fea9977d58d919eb5bd Mon Sep 17 00:00:00 2001
From: Ahmad Ragab <ahmad.ragab@joinhandshake.com>
Date: Tue, 24 Mar 2026 11:26:25 -0400
Subject: [PATCH] fix(ui): wrap agent selector buttons instead of clipping
 overflow

Agent buttons in the New Task dialog were rendered in a single flex row
with flex:1, causing buttons to shrink and clip when many agents were
configured. Buttons now wrap onto multiple lines with content-based
sizing (min-width: 70px). The dialog also widens from 420px to 540px
when more than 8 agents are present.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/AgentSelector.tsx | 5 +++--
 src/components/NewTaskDialog.tsx | 7 ++++++-
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/AgentSelector.tsx b/src/components/AgentSelector.tsx
index e0d105ad..71331561 100644
--- a/src/components/AgentSelector.tsx
+++ b/src/components/AgentSelector.tsx
@@ -22,7 +22,7 @@ export function AgentSelector(props: AgentSelectorProps) {
       >
         Agent
       </label>
-      <div style={{ display: 'flex', gap: '8px' }}>
+      <div style={{ display: 'flex', 'flex-wrap': 'wrap', gap: '8px' }}>
         <For each={props.agents}>
           {(agent) => {
             const isSelected = () => props.selectedAgent?.id === agent.id;
@@ -32,7 +32,8 @@ export function AgentSelector(props: AgentSelectorProps) {
                 class={`agent-btn ${isSelected() ? 'selected' : ''}`}
                 onClick={() => props.onSelect(agent)}
                 style={{
-                  flex: '1',
+                  flex: '0 1 auto',
+                  'min-width': '70px',
                   padding: '10px 8px',
                   background: isSelected() ? theme.bgSelected : theme.bgInput,
                   border: isSelected() ? `1px solid ${theme.accent}` : `1px solid ${theme.border}`,
diff --git a/src/components/NewTaskDialog.tsx b/src/components/NewTaskDialog.tsx
index 577afce3..acb5e364 100644
--- a/src/components/NewTaskDialog.tsx
+++ b/src/components/NewTaskDialog.tsx
@@ -433,7 +433,12 @@ export function NewTaskDialog(props: NewTaskDialogProps) {
   }
 
   return (
-    <Dialog open={props.open} onClose={props.onClose} width="420px" panelStyle={{ gap: '20px' }}>
+    <Dialog
+      open={props.open}
+      onClose={props.onClose}
+      width={store.availableAgents.length > 8 ? '540px' : '420px'}
+      panelStyle={{ gap: '20px' }}
+    >
       <form
         ref={formRef}
         onSubmit={handleSubmit}