From 32843c2551bd5832d436ef46bff5ab1198cdc39c Mon Sep 17 00:00:00 2001
From: Max Katz <me@maxkatz.me>
Date: Mon, 27 Jul 2026 20:42:33 +0400
Subject: [PATCH] fix(web): constrain branch toolbar context (#4657)

---
 apps/web/src/components/BranchToolbar.tsx     |  2 +-
 .../BranchToolbarEnvModeSelector.tsx          |  9 +++++++--
 .../BranchToolbarEnvironmentSelector.tsx      | 19 ++++++++++++-------
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/components/BranchToolbar.tsx b/apps/web/src/components/BranchToolbar.tsx
index e703427d4b6323795e24e10f57a32f1e40550ff5..2a1d0d1ec05ccee0fe4fe402cba14094cca8f701 100644
--- a/apps/web/src/components/BranchToolbar.tsx
+++ b/apps/web/src/components/BranchToolbar.tsx
@@ -321,7 +321,7 @@ export const BranchToolbar = memo(function BranchToolbar({
           onUsePreviousWorktree={onUsePreviousWorktree}
         />
       ) : (
-        <div className="flex min-w-0 shrink-0 items-center gap-1">
+        <div className="flex min-w-0 flex-1 items-center gap-1">
           {showEnvironmentIndicator && availableEnvironments && (
             <>
               <BranchToolbarEnvironmentSelector
diff --git a/apps/web/src/components/BranchToolbarEnvModeSelector.tsx b/apps/web/src/components/BranchToolbarEnvModeSelector.tsx
index e915c27312cda0120a03a107c8112d337ca0286f..d300139d3cf591a7855ca6705a2acf6af5a669b0 100644
--- a/apps/web/src/components/BranchToolbarEnvModeSelector.tsx
+++ b/apps/web/src/components/BranchToolbarEnvModeSelector.tsx
@@ -50,7 +50,7 @@ export const BranchToolbarEnvModeSelector = memo(function BranchToolbarEnvModeSe
 
   if (envLocked) {
     return (
-      <span className="inline-flex items-center gap-1 border border-transparent px-[calc(--spacing(3)-1px)] text-sm font-medium text-muted-foreground/70 sm:text-xs">
+      <span className="inline-flex shrink-0 items-center gap-1 border border-transparent px-[calc(--spacing(3)-1px)] text-sm font-medium text-muted-foreground/70 sm:text-xs">
         {activeWorktreePath ? (
           <>
             <FolderGitIcon className="size-3" />
@@ -79,7 +79,12 @@ export const BranchToolbarEnvModeSelector = memo(function BranchToolbarEnvModeSe
       }}
       items={envModeItems}
     >
-      <SelectTrigger variant="ghost" size="xs" className="font-medium" aria-label="Workspace">
+      <SelectTrigger
+        variant="ghost"
+        size="xs"
+        className="shrink-0 font-medium"
+        aria-label="Workspace"
+      >
         {effectiveEnvMode === "worktree" ? (
           <FolderGit2Icon className="size-3" />
         ) : activeWorktreePath ? (
diff --git a/apps/web/src/components/BranchToolbarEnvironmentSelector.tsx b/apps/web/src/components/BranchToolbarEnvironmentSelector.tsx
index dbc742bea5a7bbf7c884dc2b2c713295cc8351cf..e4ed54758ff40e8b34a3e6f290c7ca89ea989135 100644
--- a/apps/web/src/components/BranchToolbarEnvironmentSelector.tsx
+++ b/apps/web/src/components/BranchToolbarEnvironmentSelector.tsx
@@ -43,13 +43,13 @@ export const BranchToolbarEnvironmentSelector = memo(function BranchToolbarEnvir
 
   if (envLocked || onEnvironmentChange === undefined) {
     return (
-      <span className="inline-flex items-center gap-1 border border-transparent px-[calc(--spacing(3)-1px)] text-sm font-medium text-muted-foreground/70 sm:text-xs">
+      <span className="inline-flex min-w-0 max-w-full items-center gap-1 border border-transparent px-[calc(--spacing(3)-1px)] text-sm font-medium text-muted-foreground/70 sm:text-xs">
         {activeEnvironment?.isPrimary ? (
-          <MonitorIcon className="size-3" />
+          <MonitorIcon className="size-3 shrink-0" />
         ) : (
-          <CloudIcon className="size-3" />
+          <CloudIcon className="size-3 shrink-0" />
         )}
-        {activeEnvironment?.label ?? "Run on"}
+        <span className="truncate">{activeEnvironment?.label ?? "Run on"}</span>
       </span>
     );
   }
@@ -61,11 +61,16 @@ export const BranchToolbarEnvironmentSelector = memo(function BranchToolbarEnvir
       onValueChange={(value) => onEnvironmentChange(value as EnvironmentId)}
       items={environmentItems}
     >
-      <SelectTrigger variant="ghost" size="xs" className="font-medium" aria-label="Run on">
+      <SelectTrigger
+        variant="ghost"
+        size="xs"
+        className="min-w-0 max-w-full font-medium"
+        aria-label="Run on"
+      >
         {activeEnvironment?.isPrimary ? (
-          <MonitorIcon className="size-3" />
+          <MonitorIcon className="size-3 shrink-0" />
         ) : (
-          <CloudIcon className="size-3" />
+          <CloudIcon className="size-3 shrink-0" />
         )}
         <SelectValue />
       </SelectTrigger>
-- 
2.54.0