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}