fix(agents): wrap a permission request line in a narrow conversation (#1617)

A permission request line kept the title, "Waiting for your answer" and the answers on one row, so in a narrow agent conversation a long command title squeezed the answers until they were cut off. Title, state and answers now wrap next to the icon: a long title takes its own line and the state and answers go below it, in line with the title.

src/features/agents/Session.module.css

@@ -471,9 +471,20 @@
   min-width: 0;
   color: var(--fg-secondary);
 }
+/* Title, state and answers on one line when they fit; a long title takes its own line and
+   the state and answers go below it, in line with it. */
+.permissionBody {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-start;
+  gap: 2px 6px;
+}
 /* Up to three lines; the full text is its tooltip. */
 .permissionTitle {
   display: -webkit-box;
+  flex: 0 1 auto;
   min-width: 0;
   overflow: hidden;
   -webkit-box-orient: vertical;
@@ -482,7 +493,7 @@
   overflow-wrap: anywhere;
 }
 .permissionLine > svg,
-.permissionLine > .muted {
+.permissionBody > .muted {
   flex: none;
 }
 .permissionAnswers {

src/features/agents/SessionEditor.tsx

@@ -1213,11 +1213,13 @@ function PermissionLine({ task, entry }: { task: AgentTask; entry: PermissionEnt
   return (
     <div className={styles.permissionLine}>
       <Icon name={!entry.chosen ? "warning" : entry.chosen === "Cancelled" ? "minus" : "check"} size={13} />
-      <span className={styles.permissionTitle} title={shortTitle(task, entry.title)}>
-        {shortTitle(task, entry.title)}
-      </span>
-      <span className={styles.muted}>{entry.chosen ?? <T>Waiting for your answer</T>}</span>
-      {!entry.chosen && <PermissionAnswers task={task} entry={entry} className={styles.permissionAnswers} />}
+      <div className={styles.permissionBody}>
+        <span className={styles.permissionTitle} title={shortTitle(task, entry.title)}>
+          {shortTitle(task, entry.title)}
+        </span>
+        <span className={styles.muted}>{entry.chosen ?? <T>Waiting for your answer</T>}</span>
+        {!entry.chosen && <PermissionAnswers task={task} entry={entry} className={styles.permissionAnswers} />}
+      </div>
     </div>
   );
 }