diff --git a/src/web-ui/src/flow_chat/components/ChatInputApprovalBand.scss b/src/web-ui/src/flow_chat/components/ChatInputApprovalBand.scss index 9e4bde19ed..e2e1eb3344 100644 --- a/src/web-ui/src/flow_chat/components/ChatInputApprovalBand.scss +++ b/src/web-ui/src/flow_chat/components/ChatInputApprovalBand.scss @@ -6,7 +6,7 @@ flex-direction: column; gap: 5px; box-sizing: border-box; - // The composer centers its children, so constrain the band before truncating + // The composer centers its children, so constrain the band before laying out // long resources; otherwise its intrinsic width can exceed the composer. width: 100%; min-width: 0; @@ -42,13 +42,15 @@ color: var(--openbitfun-color-content-secondary); } - // The resource is the part worth the remaining width: which file, which - // command. Identity and owner are context and yield first. - &__resource { + // Keep the full command readable without letting it widen the composer or + // push the approval actions out of view. Only the resource body scrolls. + .openbitfun-chat-input-approval__resource { + flex: none; min-width: 0; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + max-height: min(160px, 25vh); + overflow: auto; + white-space: pre-wrap; + overflow-wrap: anywhere; } &__owner { @@ -75,6 +77,7 @@ &__note { margin: 0; + overflow-wrap: anywhere; color: var(--openbitfun-color-status-warning-content); font-size: var(--openbitfun-type-flow-support-font-size); diff --git a/src/web-ui/src/flow_chat/components/ChatInputApprovalBand.tsx b/src/web-ui/src/flow_chat/components/ChatInputApprovalBand.tsx index b1e5a8b613..4bcf0c3304 100644 --- a/src/web-ui/src/flow_chat/components/ChatInputApprovalBand.tsx +++ b/src/web-ui/src/flow_chat/components/ChatInputApprovalBand.tsx @@ -160,7 +160,7 @@ export const ChatInputApprovalBand: React.FC = ({ } }; - const resourceSummary = request.resources.join(', '); + const resourceSummary = request.resources.join('\n'); const answersAll = effectiveScope === 'all'; const allowLabel = answersAll ? t('permission.allowCurrentAndFollowing') @@ -195,14 +195,6 @@ export const ChatInputApprovalBand: React.FC = ({ {permissionActionLabel(request.action, t)} ยท - {request.delegation ? ( {t('permission.subagentOwner', { subagent: request.delegation.subagentType })} @@ -222,6 +214,16 @@ export const ChatInputApprovalBand: React.FC = ({ ) : null} + + {/* The risk is the reason to read the band at all, so it keeps its own line rather than hiding in a tooltip. */} {error ? (