fix(web): improve chat header badge and title flex distribution#1309
Conversation
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment 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. |
github-actions
bot
added
size:S
Reverts all 10 commits pulled from upstream (add5f34 through 1ae20fa) including our local classifySqliteError fix. Upstream introduced a classifySqliteError import that does not exist in [email protected]. Reverting until upstream resolves the version mismatch. Reverted commits: - 1ae20fa fix(persistence): revert classifySqliteError to SqlError({ cause, message }) - 23b3f0c Refactor Codex adapter lifecycle helpers (pingdotgg#1478) - e08cea3 Improve drain semantics via STM in DrainableWorker (pingdotgg#1474) - 83eb396 fix(threads): Keep active-turn runtime errors from ending sessions (pingdotgg#1261) - 59a383e Add Effect.fn refactor checklist (pingdotgg#1476) - fb72607 fix(claude): avoid resetting the Claude model on every turn (pingdotgg#1466) - d8a485e Support gh pr checkout pull request references (pingdotgg#1457) - 02989fe fix(web): improve chat header badge and title flex distribution (pingdotgg#1309) - 648f067 Add VS Code Insiders and VSCodium to Open In editor picker (pingdotgg#1392) - add5f34 Add Claude context window selection support (pingdotgg#1422)
3 participants
What Changed
Moved the
@container/header-actionsquery from the action buttons div to the parent header wrapper, and changed the action buttons container fromflex-1toshrink-0so 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
truncatedirectly on the Badge component (which isinline-flex justify-center), sotext-overflow: ellipsisdidn'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
Note
Fix chat header badge truncation and action label visibility breakpoints
@container/header-actionsquery 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.@sm/header-actionsto@3xl/header-actionsacross GitActionsControl, ProjectScriptsControl, and OpenInPicker, delaying when button labels and separators appear.Badgeby wrapping text in an innerspanwithtruncate, replacingtruncateon the badge itself to prevent layout shifts.Macroscope summarized 187776d.