fix(web): keep long commands inside the Add Action dialog

[Yash121l]

What Changed

The shared Textarea control now gets min-w-0 max-w-full and wrap-anywhere, so a long value wraps in place and grows the field vertically instead of sideways.

Why

Fixes #11443.

Pasting a long unbroken path into the Command field stretched the whole Add Action form past the dialog. The right edge of every control was clipped and a horizontal scrollbar appeared under the form.

The control is a flex item inside the inline-flex wrapper span. That wrapper is shrink-to-fit, so the control's width: 100% is indefinite and its automatic minimum size falls back to the content-based minimum, which field-sizing: content derives from the longest unbreakable run in the value. The surrounding fieldset carries the UA min-width: min-content, so that width propagated to the entire form and overflowed the max-w-lg popup.

min-w-0 drops the automatic minimum, max-w-full keeps the field inside the wrapper, and overflow-wrap: anywhere gives a long path a break opportunity. Display only. The stored command and its intentional line breaks are unchanged. I put the constraint on the shared control rather than a local class on this one field, as suggested on the issue, so the other dialogs that use a textarea get the same protection. I checked the other call sites. They are all freeform text and none rely on horizontal growth.

I left whitespace-pre-wrap out: the UA stylesheet already applies it to textareas, so it would be a no-op.

The example command in the issue has hyphens and does not overflow. The path from the screenshot, with no break opportunities, does. Measured unfixed: textarea 599px inside a 462px form. Fixed: 460px.

UI Changes

Before and after at the same window size, with the command from the issue screenshot:

Before	After

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes (no motion involved)

Summary by CodeRabbit

• Bug Fixes
  • Improved textarea behavior for long, unbroken text by preventing content from overflowing its container.
  • Text now wraps appropriately within the available width.

[macroscopeapp]

Approvability

Verdict: Approved at c3111ae

Macroscope's review found this PR approvable — This is a small, isolated UI bug fix that keeps long textarea values within their containers by adjusting width and wrapping styles. It adds a focused static-rendering test and does not affect persisted data, APIs, workflows, or production infrastructure.

No code changes detected at a2657d3. Prior analysis still applies.

^{You can add or adjust custom eligibility rules. Learn more.}

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: fe77e709-e83b-4db2-a85a-f67f46fa0aac

📥 Commits

Reviewing files that changed from the base of the PR and between c542b78 and c3111ae.

📒 Files selected for processing (2)

• apps/web/src/components/ui/textarea.test.tsx
• apps/web/src/components/ui/textarea.tsx

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

📝 Walkthrough

Walkthrough

The textarea now constrains its width and wraps long unbroken values. A server-rendered test verifies the added classes.

Changes

Textarea overflow prevention

Layer / File(s)	Summary
Textarea wrapping styles and validation apps/web/src/components/ui/textarea.tsx, apps/web/src/components/ui/textarea.test.tsx	The default textarea classes now include min-w-0, max-w-full, and wrap-anywhere. The test verifies these classes for a long unbroken value.

Priority: ⬇️ Low

Estimated code review effort: 2 (Simple) | ~8 minutes

Change: Bug fix · Severity of issue fixed: Low

Merge Risk: ⚪ Minimal · up to a2657

The textarea styling change addresses long-command overflow without introducing a concrete merge-blocking risk.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Docstring coverage is scoped to functions touched by this diff. Analyzed 1 functions across 2 files.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the primary fix: preventing long commands from overflowing the Add Action dialog.
Description check	✅ Passed	The description explains what changed, why it changed, implementation details, scope, measurements, UI impact, and includes before-and-after screenshots. The checklist is complete for this change; a v…
Linked Issues check	✅ Passed	Issue #11443 requires the Add Action command field to remain within the dialog width when it contains a long unbroken command. The shared Textarea now includes min-w-0, max-w-full, and `wrap-any…
Out of Scope Changes check	✅ Passed	The pull request changes only the shared Textarea styling and adds a focused regression test for long unbroken values. These changes directly support issue #11443 and do not add unrelated behavior.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

[maria-rcks]

Note

Written by claude-opus-5-5 on behalf of Maria

Hi! We are cleaning up open PRs, and this one does not say which model or harness was used to create it. If this change is really important, we recommend rebuilding the PR with a newer model and noting the model and harness in the PR description.