| author |  Max Katz <me@maxkatz.me> 2026-07-27 20:42:33+04:00 |
| committer |  GitHub <noreply@github.com> 2026-07-27 12:42:33-04:00 |
| log | 32843c2551bd5832d436ef46bff5ab1198cdc39c |
| tree | 4b6246fe91b7b686f2a6273c06830cd57d471c84 |
| parent | da11342e03dbf2bf46058d66b9c4f4eab8047a5a |
| signature | Signed by PGP key B5690EEEBB952194 |
fix(web): constrain branch toolbar context (#4657)
3 files changed, 20 insertions(+), 10 deletions(-)
apps/web/src/components/BranchToolbar.tsx+1-1
| ... | ... | @@ -321,7 +321,7 @@ export const BranchToolbar = memo(function BranchToolbar({ |
| 321 | 321 | onUsePreviousWorktree={onUsePreviousWorktree} |
| 322 | 322 | /> |
| 323 | 323 | ) : ( |
| 324 | <div className="flex min-w-0 shrink-0 items-center gap-1"> | |
| 324 | <div className="flex min-w-0 flex-1 items-center gap-1"> | |
| 325 | 325 | {showEnvironmentIndicator && availableEnvironments && ( |
| 326 | 326 | <> |
| 327 | 327 | <BranchToolbarEnvironmentSelector |
apps/web/src/components/BranchToolbarEnvModeSelector.tsx+7-2
| ... | ... | @@ -50,7 +50,7 @@ export const BranchToolbarEnvModeSelector = memo(function BranchToolbarEnvModeSe |
| 50 | 50 | |
| 51 | 51 | if (envLocked) { |
| 52 | 52 | return ( |
| 53 | <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"> | |
| 53 | <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"> | |
| 54 | 54 | {activeWorktreePath ? ( |
| 55 | 55 | <> |
| 56 | 56 | <FolderGitIcon className="size-3" /> |
| ... | ... | @@ -79,7 +79,12 @@ export const BranchToolbarEnvModeSelector = memo(function BranchToolbarEnvModeSe |
| 79 | 79 | }} |
| 80 | 80 | items={envModeItems} |
| 81 | 81 | > |
| 82 | <SelectTrigger variant="ghost" size="xs" className="font-medium" aria-label="Workspace"> | |
| 82 | <SelectTrigger | |
| 83 | variant="ghost" | |
| 84 | size="xs" | |
| 85 | className="shrink-0 font-medium" | |
| 86 | aria-label="Workspace" | |
| 87 | > | |
| 83 | 88 | {effectiveEnvMode === "worktree" ? ( |
| 84 | 89 | <FolderGit2Icon className="size-3" /> |
| 85 | 90 | ) : activeWorktreePath ? ( |
apps/web/src/components/BranchToolbarEnvironmentSelector.tsx+12-7
| ... | ... | @@ -43,13 +43,13 @@ export const BranchToolbarEnvironmentSelector = memo(function BranchToolbarEnvir |
| 43 | 43 | |
| 44 | 44 | if (envLocked || onEnvironmentChange === undefined) { |
| 45 | 45 | return ( |
| 46 | <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"> | |
| 46 | <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"> | |
| 47 | 47 | {activeEnvironment?.isPrimary ? ( |
| 48 | <MonitorIcon className="size-3" /> | |
| 48 | <MonitorIcon className="size-3 shrink-0" /> | |
| 49 | 49 | ) : ( |
| 50 | <CloudIcon className="size-3" /> | |
| 50 | <CloudIcon className="size-3 shrink-0" /> | |
| 51 | 51 | )} |
| 52 | {activeEnvironment?.label ?? "Run on"} | |
| 52 | <span className="truncate">{activeEnvironment?.label ?? "Run on"}</span> | |
| 53 | 53 | </span> |
| 54 | 54 | ); |
| 55 | 55 | } |
| ... | ... | @@ -61,11 +61,16 @@ export const BranchToolbarEnvironmentSelector = memo(function BranchToolbarEnvir |
| 61 | 61 | onValueChange={(value) => onEnvironmentChange(value as EnvironmentId)} |
| 62 | 62 | items={environmentItems} |
| 63 | 63 | > |
| 64 | <SelectTrigger variant="ghost" size="xs" className="font-medium" aria-label="Run on"> | |
| 64 | <SelectTrigger | |
| 65 | variant="ghost" | |
| 66 | size="xs" | |
| 67 | className="min-w-0 max-w-full font-medium" | |
| 68 | aria-label="Run on" | |
| 69 | > | |
| 65 | 70 | {activeEnvironment?.isPrimary ? ( |
| 66 | <MonitorIcon className="size-3" /> | |
| 71 | <MonitorIcon className="size-3 shrink-0" /> | |
| 67 | 72 | ) : ( |
| 68 | <CloudIcon className="size-3" /> | |
| 73 | <CloudIcon className="size-3 shrink-0" /> | |
| 69 | 74 | )} |
| 70 | 75 | <SelectValue /> |
| 71 | 76 | </SelectTrigger> |