From ae2bb04922177f916269f0020bc093d66fcdd73c Mon Sep 17 00:00:00 2001
From: Daniel Bonaker <daniel.bonaker@qestit.com>
Date: Fri, 13 Mar 2026 18:52:30 +0100
Subject: [PATCH] fix(web): fix header action labels collapsing too early by
 correcting flex distribution
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The header split 50/50 between title and actions via two flex-1 divs.
Both children had flex: 1 1 0%, giving the actions div only 398px at
1100px viewport — barely above the @sm (384px) threshold. Labels
collapsed to icons at ~1060px even though there was plenty of room.

- Change title div from flex-1 to flex-initial shrink so it takes
  only its content width instead of always claiming 50%
- Add overflow-hidden to actions div to prevent button overflow
- Revert label shortening from PR #771 (full text now fits)

The @container/header-actions query stays on the actions div, now
measuring ~660px at 1100px (actual available space) instead of 398px.
Labels stay visible until the viewport genuinely gets tight.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/web/src/components/GitActionsControl.logic.test.ts | 4 ++--
 apps/web/src/components/GitActionsControl.logic.ts      | 2 +-
 apps/web/src/components/chat/ChatHeader.tsx             | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/web/src/components/GitActionsControl.logic.test.ts b/apps/web/src/components/GitActionsControl.logic.test.ts
index 44ad29efa..85c32d42e 100644
--- a/apps/web/src/components/GitActionsControl.logic.test.ts
+++ b/apps/web/src/components/GitActionsControl.logic.test.ts
@@ -344,7 +344,7 @@ describe("when: working tree has local changes", () => {
     assert.deepInclude(quick, {
       kind: "run_action",
       action: "commit_push_pr",
-      label: "Commit, push & PR",
+      label: "Commit, push & create PR",
     });
   });
 
@@ -455,7 +455,7 @@ describe("when: working tree has local changes and branch is behind upstream", (
     assert.deepInclude(quick, {
       kind: "run_action",
       action: "commit_push_pr",
-      label: "Commit, push & PR",
+      label: "Commit, push & create PR",
     });
   });
 
diff --git a/apps/web/src/components/GitActionsControl.logic.ts b/apps/web/src/components/GitActionsControl.logic.ts
index 8f7f023ef..6898a5ebd 100644
--- a/apps/web/src/components/GitActionsControl.logic.ts
+++ b/apps/web/src/components/GitActionsControl.logic.ts
@@ -219,7 +219,7 @@ export function resolveQuickAction(
       return { label: "Commit & push", disabled: false, kind: "run_action", action: "commit_push" };
     }
     return {
-      label: "Commit, push & PR",
+      label: "Commit, push & create PR",
       disabled: false,
       kind: "run_action",
       action: "commit_push_pr",
diff --git a/apps/web/src/components/chat/ChatHeader.tsx b/apps/web/src/components/chat/ChatHeader.tsx
index ea7f911be..e6a289ae8 100644
--- a/apps/web/src/components/chat/ChatHeader.tsx
+++ b/apps/web/src/components/chat/ChatHeader.tsx
@@ -55,7 +55,7 @@ export const ChatHeader = memo(function ChatHeader({
 }: ChatHeaderProps) {
   return (
     <div className="flex min-w-0 flex-1 items-center gap-2">
-      <div className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden sm:gap-3">
+      <div className="flex min-w-0 flex-initial shrink items-center gap-2 overflow-hidden sm:gap-3">
         <SidebarTrigger className="size-7 shrink-0 md:hidden" />
         <h2
           className="min-w-0 shrink truncate text-sm font-medium text-foreground"
@@ -74,7 +74,7 @@ export const ChatHeader = memo(function ChatHeader({
           </Badge>
         )}
       </div>
-      <div className="@container/header-actions flex min-w-0 flex-1 items-center justify-end gap-2 @sm/header-actions:gap-3">
+      <div className="@container/header-actions flex min-w-0 flex-1 items-center justify-end gap-2 overflow-hidden @sm/header-actions:gap-3">
         {activeProjectScripts && (
           <ProjectScriptsControl
             scripts={activeProjectScripts}