fix(web): contain long approval commands (#6503)

Author: Serendeep

.github/pr-assets/6503-after.svg

@@ -3117,7 +3117,7 @@ export const ChatComposer = memo(function ChatComposer(props: ChatComposerProps)
 
           {/* Bottom toolbar */}
           {isComposerCollapsedMobile ? null : activePendingApproval ? (
-            <div className="flex items-center justify-end gap-2 px-3 pb-3 sm:px-4 sm:pb-4">
+            <div className="flex flex-wrap items-center justify-end gap-2 px-3 pb-3 sm:px-4 sm:pb-4">
               <ComposerPendingApprovalActions
                 requestId={activePendingApproval.requestId}
                 isResponding={respondingRequestIds.includes(activePendingApproval.requestId)}

apps/web/src/components/chat/ChatComposer.tsx

@@ -6,7 +6,7 @@ import { ComposerPendingApprovalPanel } from "./ComposerPendingApprovalPanel";
 
 describe("ComposerPendingApprovalPanel", () => {
   it("renders complete multiline command details without hover or truncation", () => {
-    const detail = `bun run release -- ${"long-argument ".repeat(20)}\nsecond line`;
+    const detail = `bun run release -- ${"x".repeat(500)}\nsecond line`;
     const markup = renderToStaticMarkup(
       <ComposerPendingApprovalPanel
         approval={{
@@ -24,5 +24,8 @@ describe("ComposerPendingApprovalPanel", () => {
     expect(markup).toContain(detail);
     expect(markup).not.toContain("truncate");
     expect(markup).not.toContain("line-clamp");
+    expect(markup).toContain("min-w-0");
+    expect(markup).toContain("max-w-full");
+    expect(markup).toContain("[overflow-wrap:anywhere]");
   });
 });

apps/web/src/components/chat/ComposerPendingApprovalPanel.test.tsx

@@ -24,7 +24,7 @@ export const ComposerPendingApprovalPanel = memo(function ComposerPendingApprova
         : "File change";
 
   return (
-    <div className="px-4 py-3.5 sm:px-5 sm:py-4">
+    <div className="min-w-0 px-4 py-3.5 sm:px-5 sm:py-4">
       <div className="flex flex-wrap items-center gap-2">
         <span className="uppercase text-sm tracking-[0.2em]">PENDING APPROVAL</span>
         <span className="text-sm font-medium">{approvalSummary}</span>
@@ -33,11 +33,11 @@ export const ComposerPendingApprovalPanel = memo(function ComposerPendingApprova
         ) : null}
       </div>
       {approval.detail ? (
-        <div className="mt-3 rounded-lg border border-border/65 bg-background/70 p-3">
+        <div className="mt-3 min-w-0 max-w-full rounded-lg border border-border/65 bg-background/70 p-3">
           <p className="text-xs font-medium text-muted-foreground">{detailLabel}</p>
           <pre
             aria-label={detailLabel}
-            className="mt-2 max-h-40 overflow-auto whitespace-pre-wrap break-words font-mono text-xs leading-relaxed text-foreground"
+            className="mt-2 min-w-0 max-w-full max-h-40 overflow-auto whitespace-pre-wrap [overflow-wrap:anywhere] font-mono text-xs leading-relaxed text-foreground"
             data-approval-detail="complete"
           >
             {approval.detail}