fix(web): contain long approval commands

[Serendeep]

Problem

A command approval containing a very long unbroken argument could impose its min-content width on the composer. The command detail then escaped its container and overlapped the approval actions, making the prompt difficult or impossible to use.

Fix

• Constrain the approval panel and command-detail container so nested flex items may shrink.
• Wrap unbroken command text at arbitrary character boundaries while preserving whitespace and multiline formatting.
• Allow desktop approval actions to wrap when horizontal space is tight.
• Cover the regression with a 500-character unbroken command argument.

Before / After

Before	After
The command escapes the panel and overlaps the actions.	The complete command stays scrollable inside the panel and every action remains reachable.

Validation

• pnpm --filter @t3tools/web exec vp test run --passWithNoTests --project unit src/components/chat/ComposerPendingApprovalPanel.test.tsx
• pnpm --filter @t3tools/web exec tsgo --noEmit
• pnpm --filter @t3tools/web exec vp fmt --check src/components/chat/ComposerPendingApprovalPanel.tsx src/components/chat/ComposerPendingApprovalPanel.test.tsx src/components/chat/ChatComposer.tsx
• git diff --check
• Browser-verified at a 560px composer width with a 500-character unbroken command.

Closes #6493

Implemented with GPT-5.6-sol in the Codex harness.

---

Note

Low Risk
Localized chat composer approval UI and styling; no auth, data, or API changes.

Overview
Fixes pending command approvals where a very long unbroken argument forced the composer wider than its container and overlapped the approve/deny actions.

The approval panel now uses shrink-friendly flex constraints (min-w-0, max-w-full) and overflow-wrap: anywhere on the command <pre> so the full multiline command stays inside a scrollable area instead of being truncated or spilling out. The composer footer action row uses flex-wrap so buttons remain reachable on narrow widths.

A unit test now asserts a 500-character unbroken command renders with complete detail and without truncate/line-clamp classes.

^{Reviewed by Cursor Bugbot for commit f982c47. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Fix overflow of long approval commands in ComposerPendingApprovalPanel

Long, unbroken strings in pending approval commands were overflowing their containers. Adds min-w-0, max-w-full, and [overflow-wrap:anywhere] to the panel's wrapper and <pre> elements so content wraps within the available width. Also adds flex-wrap to the composer footer's action container so approval action buttons wrap onto multiple lines on narrow viewports.

^{Macroscope summarized f982c47.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 7d0bfd2f-0777-479a-bedc-a1559973fe20

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[macroscopeapp]

Approvability

Verdict: Approved f982c47

Pure CSS styling changes to fix text overflow for long approval commands. Adds standard CSS containment classes (min-w-0, max-w-full, overflow-wrap) with no runtime behavior changes. Test updated to verify class application.

^{You can customize Macroscope's approvability policy. Learn more.}