fix styles

juliusmarminge · juliusmarminge · commit 51556a3cf918 · 2026-03-12T19:20:50.000-07:00
diff --git a/apps/web/src/components/BranchToolbar.tsx b/apps/web/src/components/BranchToolbar.tsx
@@ -13,6 +13,7 @@ import {
 } from "./BranchToolbar.logic";
 import { BranchToolbarBranchSelector } from "./BranchToolbarBranchSelector";
 import { Select, SelectItem, SelectPopup, SelectTrigger, SelectValue } from "./ui/select";
+import { Button } from "./ui/button";
 
 const envModeItems = [
   { value: "local", label: "Local" },
@@ -110,54 +111,50 @@ export default function BranchToolbar({
 
   return (
     <div className="mx-auto flex w-full max-w-3xl items-center justify-between px-5 pb-3 pt-1">
-      <div className="flex items-center gap-2">
-        {envLocked || activeWorktreePath ? (
-          <span className="inline-flex items-center gap-1.5 border border-transparent px-[calc(--spacing(2)-1px)] text-sm font-medium text-muted-foreground/70 sm:text-xs">
-            {activeWorktreePath ? (
-              <>
-                <GitForkIcon className="size-3" />
-                Worktree
-              </>
+      {envLocked || activeWorktreePath ? (
+        <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">
+          {activeWorktreePath ? (
+            <>
+              <GitForkIcon className="size-3" />
+              Worktree
+            </>
+          ) : (
+            <>
+              <FolderIcon className="size-3" />
+              Local
+            </>
+          )}
+        </span>
+      ) : (
+        <Select
+          value={effectiveEnvMode}
+          onValueChange={(value) => onEnvModeChange(value as EnvMode)}
+          items={envModeItems}
+        >
+          <SelectTrigger variant="ghost" size="xs" className="font-medium">
+            {effectiveEnvMode === "worktree" ? (
+              <GitForkIcon className="size-3" />
             ) : (
-              <>
+              <FolderIcon className="size-3" />
+            )}
+            <SelectValue />
+          </SelectTrigger>
+          <SelectPopup>
+            <SelectItem value="local">
+              <span className="inline-flex items-center gap-1.5">
                 <FolderIcon className="size-3" />
                 Local
-              </>
-            )}
-          </span>
-        ) : (
-          <Select
-            value={effectiveEnvMode}
-            onValueChange={(value) => onEnvModeChange(value as EnvMode)}
-            items={envModeItems}
-          >
-            <SelectTrigger variant="ghost" size="sm">
+              </span>
+            </SelectItem>
+            <SelectItem value="worktree">
               <span className="inline-flex items-center gap-1.5">
-                {effectiveEnvMode === "worktree" ? (
-                  <GitForkIcon className="size-3" />
-                ) : (
-                  <FolderIcon className="size-3" />
-                )}
-                <SelectValue />
+                <GitForkIcon className="size-3" />
+                New worktree
               </span>
-            </SelectTrigger>
-            <SelectPopup>
-              <SelectItem value="local">
-                <span className="inline-flex items-center gap-1.5">
-                  <FolderIcon className="size-3" />
-                  Local
-                </span>
-              </SelectItem>
-              <SelectItem value="worktree">
-                <span className="inline-flex items-center gap-1.5">
-                  <GitForkIcon className="size-3" />
-                  New worktree
-                </span>
-              </SelectItem>
-            </SelectPopup>
-          </Select>
-        )}
-      </div>
+            </SelectItem>
+          </SelectPopup>
+        </Select>
+      )}
 
       <BranchToolbarBranchSelector
         activeProjectCwd={activeProject.cwd}
diff --git a/apps/web/src/components/ui/select.tsx b/apps/web/src/components/ui/select.tsx
@@ -29,6 +29,7 @@ const selectTriggerVariants = cva(
         default: "min-h-9 px-[calc(--spacing(3)-1px)] sm:min-h-8",
         lg: "min-h-10 px-[calc(--spacing(3)-1px)] sm:min-h-9",
         sm: "min-h-8 gap-1.5 px-[calc(--spacing(2.5)-1px)] sm:min-h-7",
+        xs: "h-7 gap-1 rounded-md px-[calc(--spacing(2)-1px)] text-sm before:rounded-[calc(var(--radius-md)-1px)] sm:h-6 sm:text-xs [&_svg:not([class*='size-'])]:size-4 sm:[&_svg:not([class*='size-'])]:size-3.5",
       },
     },
   },
