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>
This commit is contained in:
Doyoon Lee
2026-08-10 00:24:00 -07:00
committed by GitHub
co-authored by Brennan Benson
parent c498d763cd
commit 33dad13e64
2 changed files with 29 additions and 3 deletions
@@ -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')
})
})
@@ -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>