fix(web): task durations over an hour no longer wrap in the tasks panel

[jamesvillarrubia]

What Changed

In the composer tasks panel, a step that took over an hour showed its time on two lines (1h 16m / 16s). The duration span in ComposerTasksBadge.tsx now uses min-w-12 whitespace-nowrap in place of w-12. Short times keep the 48px right-aligned column. A longer time widens that row's duration column to the left and stays on one line.

Fixes #13447

Why

w-12 is a fixed 48px box, and 1h 16m 16s at 10px is wider than 48px, so the text broke. The step text column is minmax(0, 1fr), so it has room to give up. min-w-12 keeps the column alignment from #12165.

UI Changes

Before:

After:

Tested on a local dev server with an OpenCode thread's task list, with the duration text set to 1h 16m 16s in the inspector.

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

Made with Claude Opus 5.5 in Claude Code.

🤖 Generated with Claude Code

Summary by CodeRabbit

• Style
  • The task-duration label now maintains a minimum width and keeps its contents on one line.

[coderabbitai]

Navigate logical layers of code changes, visualize relationships, and explore their blast radius.

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository: pingdotgg/t3code/.coderabbit.yaml

Review profile: CHILL

Plan: Advanced

Run ID: 836b85ac-cce9-4b30-914c-bb3bea7f2b1d

📥 Commits

Reviewing files that changed from the base of the PR and between 84c436b and 865f852.

📒 Files selected for processing (1)

• apps/web/src/components/chat/ComposerTasksBadge.tsx

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

---

📝 Walkthrough

Walkthrough

The task duration label now uses a minimum width instead of a fixed width. Its contents do not wrap.

Changes

Task duration label

Layer / File(s)	Summary
Duration label styling apps/web/src/components/chat/ComposerTasksBadge.tsx	The duration label uses a minimum width and prevents its contents from wrapping.

Estimated code review effort: 1 (Trivial) | ~3 minutes

Suggested reviewers: juliusmarminge

Merge Risk: ⚪ Minimal · up to 865f8

Long task durations stay on one line and can use the width they need. No material merge risk is evident.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely identifies the web bug fix: task durations longer than one hour no longer wrap in the tasks panel.
Description check	✅ Passed	The description includes complete What Changed, Why, UI Changes, and Checklist sections. It explains the fix, provides before/after screenshots, identifies the issue, and reports testing. The video it…
Linked Issues check	✅ Passed	Issue #13447 requires task durations over one hour to remain on one line and expand leftward when space is available. The PR changes the duration span from fixed w-12 to min-w-12 whitespace-nowrap…
Out of Scope Changes check	✅ Passed	The whole-PR summary shows one declaration change in apps/web/src/components/chat/ComposerTasksBadge.tsx. The change directly supports the linked task-duration display fix. No unrelated production c…
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. Docstring coverage is scoped to functions touched by this diff. Analyzed 0 functions across 1…

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create a new PR

---

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