| 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,7 +321,7 @@ export const BranchToolbar = memo(function BranchToolbar({ |
| 321 | onUsePreviousWorktree={onUsePreviousWorktree} | 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 | {showEnvironmentIndicator && availableEnvironments && ( | 325 | {showEnvironmentIndicator && availableEnvironments && ( |
| 326 | <> | 326 | <> |
| 327 | <BranchToolbarEnvironmentSelector | 327 | <BranchToolbarEnvironmentSelector |
apps/web/src/components/BranchToolbarEnvModeSelector.tsx+7-2
| ... | @@ -50,7 +50,7 @@ export const BranchToolbarEnvModeSelector = memo(function BranchToolbarEnvModeSe | ... | @@ -50,7 +50,7 @@ export const BranchToolbarEnvModeSelector = memo(function BranchToolbarEnvModeSe |
| 50 | 50 | ||
| 51 | if (envLocked) { | 51 | if (envLocked) { |
| 52 | return ( | 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 | {activeWorktreePath ? ( | 54 | {activeWorktreePath ? ( |
| 55 | <> | 55 | <> |
| 56 | <FolderGitIcon className="size-3" /> | 56 | <FolderGitIcon className="size-3" /> |
| ... | @@ -79,7 +79,12 @@ export const BranchToolbarEnvModeSelector = memo(function BranchToolbarEnvModeSe | ... | @@ -79,7 +79,12 @@ export const BranchToolbarEnvModeSelector = memo(function BranchToolbarEnvModeSe |
| 79 | }} | 79 | }} |
| 80 | items={envModeItems} | 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 | {effectiveEnvMode === "worktree" ? ( | 88 | {effectiveEnvMode === "worktree" ? ( |
| 84 | <FolderGit2Icon className="size-3" /> | 89 | <FolderGit2Icon className="size-3" /> |
| 85 | ) : activeWorktreePath ? ( | 90 | ) : activeWorktreePath ? ( |
apps/web/src/components/BranchToolbarEnvironmentSelector.tsx+12-7
| ... | @@ -43,13 +43,13 @@ export const BranchToolbarEnvironmentSelector = memo(function BranchToolbarEnvir | ... | @@ -43,13 +43,13 @@ export const BranchToolbarEnvironmentSelector = memo(function BranchToolbarEnvir |
| 43 | 43 | ||
| 44 | if (envLocked || onEnvironmentChange === undefined) { | 44 | if (envLocked || onEnvironmentChange === undefined) { |
| 45 | return ( | 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 | {activeEnvironment?.isPrimary ? ( | 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 | </span> | 53 | </span> |
| 54 | ); | 54 | ); |
| 55 | } | 55 | } |
| ... | @@ -61,11 +61,16 @@ export const BranchToolbarEnvironmentSelector = memo(function BranchToolbarEnvir | ... | @@ -61,11 +61,16 @@ export const BranchToolbarEnvironmentSelector = memo(function BranchToolbarEnvir |
| 61 | onValueChange={(value) => onEnvironmentChange(value as EnvironmentId)} | 61 | onValueChange={(value) => onEnvironmentChange(value as EnvironmentId)} |
| 62 | items={environmentItems} | 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 | {activeEnvironment?.isPrimary ? ( | 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 | <SelectValue /> | 75 | <SelectValue /> |
| 71 | </SelectTrigger> | 76 | </SelectTrigger> |