fix(web): improve chat header badge and title flex distribution

[GuilhermeVieiraDev]

What Changed

Moved the @container/header-actions query from the action buttons div to the parent header wrapper, and changed the action buttons container from flex-1 to shrink-0 so it sizes to its actual content instead of claiming a fixed 50% of the header.

Also fixed the project badge truncation so it clips from the right with an ellipsis instead of clipping from both sides.

The container query breakpoint was updated from @sm (24rem) to @3xl (48rem) across the four affected files since the container is now the full header width instead of just the right half.

Why

The chat header splits into two sections: title + badge on the left, action buttons on the right. Both had flex-1, which gave them a rigid 50/50 split regardless of content. When action labels collapsed at smaller widths, the right side kept its 50% allocation as empty space while the badge and title were still being truncated. This same rigid split also caused buttons to overlap before the compact layout kicked in.

The badge also used truncate directly on the Badge component (which is inline-flex justify-center), so text-overflow: ellipsis didn't work and the centered text got clipped from both sides.

This is a follow-up to #1039, which addressed the same problem but has gone stale.

Builds on the earlier header overlap reports in #626 and #806.
Fixes #399, fixes #426, and fixes #713.

UI Changes

Before:

Screencast.From.2026-03-22.18-08-14.mp4

After:

Screencast.From.2026-03-22.18-08-58.mp4

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

Note

Fix chat header badge truncation and action label visibility breakpoints

• Moves the @container/header-actions query scope from the right-side action container to the outer header element in ChatHeader.tsx, so all child components share the same container query context.
• Changes action label and separator visibility from @sm/header-actions to @3xl/header-actions across GitActionsControl, ProjectScriptsControl, and OpenInPicker, delaying when button labels and separators appear.
• Fixes project name truncation in the Badge by wrapping text in an inner span with truncate, replacing truncate on the badge itself to prevent layout shifts.

^{Macroscope summarized 187776d.}

[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

Run ID: f32ed546-e46d-41d3-88a8-d93b24fef0ed

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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 and usage tips.}

Tip

CodeRabbit can use Trivy to scan for security misconfigurations and secrets in Infrastructure as Code files.

Add a .trivyignore file to your project to customize which findings Trivy reports.