From 800949b7b5680ede9b94be37585ef5e26c9e081f Mon Sep 17 00:00:00 2001
From: l0ng-ai <24760907+l0ng-ai@users.noreply.github.com>
Date: Fri, 6 Nov 2026 03:14:41 +0800
Subject: [PATCH] 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 | 13 ++++++++++++-
 src/features/agents/SessionEditor.tsx  | 12 +++++++-----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/features/agents/Session.module.css b/src/features/agents/Session.module.css
index 067297bc0..1aedb6341 100644
--- a/src/features/agents/Session.module.css
+++ b/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 {
diff --git a/src/features/agents/SessionEditor.tsx b/src/features/agents/SessionEditor.tsx
index f1c777a13..5b20670b7 100644
--- a/src/features/agents/SessionEditor.tsx
+++ b/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>
   );
 }