From 33dad13e649dc31a79d552b60d9f85c2eb48d303 Mon Sep 17 00:00:00 2001
From: Doyoon Lee <46391618+doyoonear@users.noreply.github.com>
Date: Mon, 10 Aug 2026 16:24:00 +0900
Subject: [PATCH] fix: wrap unbroken auto-rename failure output (#12317)

* fix: wrap unbroken auto-rename failure output

* test(sidebar): cover unbroken auto-rename failure containment

happy-dom does no intrinsic sizing, so assert the two declarations that
keep an unbroken token from widening DialogContent's grid column. The
test fails when either min-w-0 or overflow-wrap:anywhere is reverted.

---------

Co-authored-by: Brennan Benson <79079362+brennanb2025@users.noreply.github.com>
---
 .../sidebar/AutoRenameFailedDialog.test.tsx   | 25 +++++++++++++++++++
 .../sidebar/AutoRenameFailedDialog.tsx        |  7 +++---
 2 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/renderer/src/components/sidebar/AutoRenameFailedDialog.test.tsx b/src/renderer/src/components/sidebar/AutoRenameFailedDialog.test.tsx
index 49e2cb52ef0..9e8e1350970 100644
--- a/src/renderer/src/components/sidebar/AutoRenameFailedDialog.test.tsx
+++ b/src/renderer/src/components/sidebar/AutoRenameFailedDialog.test.tsx
@@ -83,3 +83,28 @@ describe('AutoRenameFailedDialog full output', () => {
     expect(document.body.textContent).not.toContain('first run full output')
   })
 })
+
+// Why: happy-dom does no intrinsic sizing, so assert the two declarations that
+// keep an unbroken token from widening DialogContent's grid column instead.
+describe('AutoRenameFailedDialog unbroken output containment', () => {
+  it('keeps the output surface shrinkable and breakable mid-token', async () => {
+    getBranchRenameFailureOutput.mockResolvedValueOnce(`{"error":"${'A'.repeat(1000)}"}`)
+    await renderDialog()
+
+    const dialog = document.querySelector('[role="dialog"]')
+    const output = dialog?.querySelector('pre')
+    expect(output).toBeTruthy()
+    expect(output?.textContent).toContain('A'.repeat(1000))
+
+    // `break-words` (overflow-wrap: break-word) wraps painted text but leaves
+    // min-content at the full token width; only `anywhere` shrinks it.
+    expect(output?.className).toContain('[overflow-wrap:anywhere]')
+    expect(output?.className).not.toContain('break-words')
+
+    // DialogContent is a grid, so its child needs min-w-0 to shrink below min-content.
+    const gridChild = Array.from(dialog?.children ?? []).find((child) =>
+      child.contains(output ?? null)
+    )
+    expect(gridChild?.className).toContain('min-w-0')
+  })
+})
diff --git a/src/renderer/src/components/sidebar/AutoRenameFailedDialog.tsx b/src/renderer/src/components/sidebar/AutoRenameFailedDialog.tsx
index 6ea256e5aa3..04e59d3ef6d 100644
--- a/src/renderer/src/components/sidebar/AutoRenameFailedDialog.tsx
+++ b/src/renderer/src/components/sidebar/AutoRenameFailedDialog.tsx
@@ -115,8 +115,9 @@ export function AutoRenameFailedDialog({
           )}
         </p>
         {/* Why: agent-CLI output is literal and often multi-line, so render it
-            verbatim (mono, wrapped) inside a height-capped scroll region. */}
-        <div className="space-y-1.5">
+            verbatim (mono, wrapped) inside a height-capped scroll region.
+            min-w-0 keeps an unbroken token from widening this grid column. */}
+        <div className="min-w-0 space-y-1.5">
           <p className="text-xs font-medium text-foreground">
             {translate(
               'auto.components.sidebar.AutoRenameFailedDialog.74fc00776f',
@@ -143,7 +144,7 @@ export function AutoRenameFailedDialog({
             >
               {copied ? <Check className="size-3.5" /> : <Copy className="size-3.5" />}
             </Button>
-            <pre className="scrollbar-sleek max-h-[40vh] overflow-auto rounded-md border border-border/60 bg-muted/40 py-3 pl-3 pr-9 font-mono text-[11px] leading-4 whitespace-pre-wrap break-words text-foreground">
+            <pre className="scrollbar-sleek max-h-[40vh] overflow-auto rounded-md border border-border/60 bg-muted/40 py-3 pl-3 pr-9 font-mono text-[11px] leading-4 whitespace-pre-wrap [overflow-wrap:anywhere] text-foreground">
               {detailText}
             </pre>
           </div>