highperfocused/multica
1
0
Fork 0
mirror of https://github.com/multica-ai/multica.git synced 2026-07-25 03:55:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix: permission buttons and text overflow container width

Browse Source 
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>
This commit is contained in:
Jiang Bohan
2026-01-22 17:02:33 +08:00
parent 7745c67a08
commit cc72dc1017
3 changed files with 27 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/renderer/src/components/permission/AskUserQuestion/AskUserQuestionUI.tsx
View File

@@ -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>

8
src/renderer/src/components/permission/AskUserQuestion/QuestionOptions.tsx
View File

@@ -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>

26
src/renderer/src/components/permission/StandardPermissionUI.tsx
View File

@@ -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>
</>
)}