From cc72dc10176e5f5f6c597e42ff959bb527c3fd8f Mon Sep 17 00:00:00 2001
From: Jiang Bohan <bhjiang@outlook.com>
Date: Thu, 22 Jan 2026 17:02:33 +0800
Subject: [PATCH] fix: permission buttons and text overflow container width

Add proper overflow handling to permission UI components:
- Add flex-wrap and truncate to action buttons in StandardPermissionUI
- Add break-words to title and kind text in StandardPermissionUI
- Add break-words to question header and text in AskUserQuestionUI
- Add min-w-0, overflow-hidden, and break-words to QuestionOptions

Closes #88

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../AskUserQuestion/AskUserQuestionUI.tsx     |  6 +++--
 .../AskUserQuestion/QuestionOptions.tsx       |  8 +++---
 .../permission/StandardPermissionUI.tsx       | 26 +++++++++++++------
 3 files changed, 27 insertions(+), 13 deletions(-)

diff --git a/src/renderer/src/components/permission/AskUserQuestion/AskUserQuestionUI.tsx b/src/renderer/src/components/permission/AskUserQuestion/AskUserQuestionUI.tsx
index c29e1e79ba..f083f47c54 100644
--- a/src/renderer/src/components/permission/AskUserQuestion/AskUserQuestionUI.tsx
+++ b/src/renderer/src/components/permission/AskUserQuestion/AskUserQuestionUI.tsx
@@ -117,11 +117,13 @@ export function AskUserQuestionUI({
 
       {/* Question header */}
       {currentQuestion.header && (
-        <div className="font-medium text-sm text-foreground">{currentQuestion.header}</div>
+        <div className="font-medium text-sm text-foreground break-words">
+          {currentQuestion.header}
+        </div>
       )}
 
       {/* Question text */}
-      <div className="text-sm text-foreground">
+      <div className="text-sm text-foreground break-words">
         {currentQuestion.question}
         {isMultiSelect && (
           <span className="text-xs text-muted-foreground ml-2">(Select multiple)</span>
diff --git a/src/renderer/src/components/permission/AskUserQuestion/QuestionOptions.tsx b/src/renderer/src/components/permission/AskUserQuestion/QuestionOptions.tsx
index a7ca910d14..e1a6e0952a 100644
--- a/src/renderer/src/components/permission/AskUserQuestion/QuestionOptions.tsx
+++ b/src/renderer/src/components/permission/AskUserQuestion/QuestionOptions.tsx
@@ -39,10 +39,12 @@ export function QuestionOptions({
                   {isSelected && <Check className="h-3 w-3 text-primary-foreground" />}
                 </div>
               )}
-              <div className="flex-1">
-                <div className="font-medium text-sm">{opt.label}</div>
+              <div className="flex-1 min-w-0 overflow-hidden">
+                <div className="font-medium text-sm break-words">{opt.label}</div>
                 {opt.description && (
-                  <div className="text-xs text-muted-foreground mt-0.5">{opt.description}</div>
+                  <div className="text-xs text-muted-foreground mt-0.5 break-words">
+                    {opt.description}
+                  </div>
                 )}
               </div>
             </div>
diff --git a/src/renderer/src/components/permission/StandardPermissionUI.tsx b/src/renderer/src/components/permission/StandardPermissionUI.tsx
index 109c9e41c0..7ed999e9ec 100644
--- a/src/renderer/src/components/permission/StandardPermissionUI.tsx
+++ b/src/renderer/src/components/permission/StandardPermissionUI.tsx
@@ -44,10 +44,14 @@ export function StandardPermissionUI({
       </div>
 
       {/* Tool call info */}
-      <div className="rounded-md bg-muted/50 p-2.5">
-        <div className="font-medium text-sm text-foreground">{toolCall.title || 'Tool Call'}</div>
+      <div className="rounded-md bg-muted/50 p-2.5 overflow-hidden">
+        <div className="font-medium text-sm text-foreground break-words">
+          {toolCall.title || 'Tool Call'}
+        </div>
         {toolCall.kind && (
-          <div className="text-xs text-muted-foreground mt-0.5">Type: {toolCall.kind}</div>
+          <div className="text-xs text-muted-foreground mt-0.5 break-words">
+            Type: {toolCall.kind}
+          </div>
         )}
       </div>
 
@@ -62,7 +66,7 @@ export function StandardPermissionUI({
 
       {/* Action buttons */}
       {isPending ? (
-        <div className="flex gap-2">
+        <div className="flex flex-wrap gap-2 overflow-hidden">
           {options.length > 2 ? (
             // Multiple options - show all
             options.map((option) => (
@@ -77,8 +81,9 @@ export function StandardPermissionUI({
                       : 'outline'
                 }
                 onClick={() => respondToRequest(option.optionId)}
+                className="max-w-full truncate"
               >
-                {option.name}
+                <span className="truncate">{option.name}</span>
               </Button>
             ))
           ) : (
@@ -88,11 +93,16 @@ export function StandardPermissionUI({
                 size="sm"
                 variant="outline"
                 onClick={() => respondToRequest(denyOption.optionId)}
+                className="max-w-full truncate"
               >
-                {denyOption.name || 'Deny'}
+                <span className="truncate">{denyOption.name || 'Deny'}</span>
               </Button>
-              <Button size="sm" onClick={() => respondToRequest(allowOption.optionId)}>
-                {allowOption.name || 'Allow'}
+              <Button
+                size="sm"
+                onClick={() => respondToRequest(allowOption.optionId)}
+                className="max-w-full truncate"
+              >
+                <span className="truncate">{allowOption.name || 'Allow'}</span>
               </Button>
             </>
           )}