fix(web): fix header action labels collapsing too early by correcting flex distribution

[daniel-bonaker-qestit]

What Changed

• Changed the header title area from flex-1 to flex-initial shrink so it only takes the space it needs instead of always claiming 50% (ChatHeader.tsx line 58)
• Added overflow-hidden to the actions div to prevent button overflow into the diff toggle (ChatHeader.tsx line 77)
• Reverted the label shortening from Fix UI Overflow when Github Action is 'Commit, Create & Push PR' #771 — restored "Commit, push & create PR" since the full text now fits (GitActionsControl.logic.ts, .test.ts)

5 lines changed across 3 files, 0 lines added or removed.

Why

The header was split 50/50 between title and actions via two flex-1 divs. Both children had flex: 1 1 0%, splitting the available space exactly in half (398px each at 1100px viewport). The @container/header-actions container query on the actions div measured only that 398px — barely above the @sm (384px) threshold — so button labels collapsed to icons at ~1060px viewport width even though there was plenty of room.

This 50/50 split was introduced accidentally in commit ce96ad0b ("UI fixes"). Before that commit, the title had no flex-1 and the actions div used shrink-0 with the parent using justify-between. The restructuring gave both children flex-1 as a side effect.

The maintainer identified this as the root cause in PR #773:

"the real issue here is that the header is split in 50/50, so the thread title + project pill takes up 50% of the width even if not used, instead of letting the action buttons occupy that space"

The fix: Change the title div from flex-1 to flex-initial shrink. Now the title takes only its content width (~132px for a typical short title) and the actions div claims all remaining space via flex-1. The @container/header-actions query stays on the actions div and now measures the actual available space (~660px at 1100px instead of 398px), keeping labels visible until the viewport genuinely gets tight.

overflow-hidden on the actions div prevents any remaining edge-case overflow from reaching the diff toggle button.

UI Changes

Before (1100px viewport): Header action labels ("Build", "Open", "Commit & push") collapse to icon-only mode because the 50/50 split gives the actions div only 398px (barely above the 384px @sm threshold).

After (1100px viewport): All action labels are fully visible. The title takes only ~132px, leaving ~660px for actions — well above the 384px threshold.

Checklist

• This PR is small and focused (5-line change across 3 files)
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

---

Fixes #626. Fixes #806.
Related: #457, #399, #713, #426 (other header layout issues improved by better flex distribution).
Reverts label-shortening bandaid from #771 (no longer needed).
Obsoletes #773 (different approach to the same problem, as discussed by maintainer).

Note

Fix header action labels collapsing too early by correcting flex distribution in ChatHeader

• Changes the left header group from flex-1 to flex-initial shrink so it no longer grows to fill all available space, preventing the right action area from being squeezed out.
• Adds overflow-hidden to the right actions container to clip any remaining overflow.
• Updates the commit_push_pr quick action label from "Commit, push & PR" to "Commit, push & create PR" in GitActionsControl.logic.ts for clarity.

^{Macroscope summarized ae2bb04.}

[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: 26e07fdc-1140-45d9-88fd-a35899f7cd89

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
• Post copyable unit tests in a comment

📝 Coding Plan

• Generate coding plan for human review comments

---

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 scan for known vulnerabilities in your dependencies using OSV Scanner.

OSV Scanner will automatically detect and report security vulnerabilities in your project's dependencies. No additional configuration is required.

[juliusmarminge]

screenshots/recordings plss