Add iconOnly prop to BranchSwitcher for compact display

Author: chriswritescode-dev

frontend/src/components/repo/BranchSwitcher.tsx

@@ -21,9 +21,10 @@ interface BranchSwitcherProps {
   repoUrl?: string | null;
   repoLocalPath?: string;
   className?: string;
+  iconOnly?: boolean;
 }
 
-export function BranchSwitcher({ repoId, currentBranch, isWorktree, repoUrl, repoLocalPath, className }: BranchSwitcherProps) {
+export function BranchSwitcher({ repoId, currentBranch, isWorktree, repoUrl, repoLocalPath, className, iconOnly }: BranchSwitcherProps) {
   const [addBranchOpen, setAddBranchOpen] = useState(false);
   const [gitChangesOpen, setGitChangesOpen] = useState(false);
   const queryClient = useQueryClient();
@@ -63,14 +64,14 @@ export function BranchSwitcher({ repoId, currentBranch, isWorktree, repoUrl, rep
             variant="ghost"
             size="sm"
             disabled={switchBranchMutation.isPending}
-            className={`h-6 px-1 sm:px-2 text-[10px] sm:text-xs text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 hover:bg-accent gap-1 border border-blue-500/20 ${className || ""}`}
+            className={`h-6 px-1 sm:px-2 text-[10px] sm:text-xs text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 hover:bg-accent gap-1 border border-blue-500/20 ${iconOnly ? 'w-6' : ''} ${className || ""}`}
           >
             {switchBranchMutation.isPending ? (
               <Loader2 className="w-3 h-3 animate-spin" />
             ) : (
               <GitBranch className="w-3 h-3" />
             )}
-            <span className="truncate">{currentBranch}</span>
+            {!iconOnly && <span className="truncate">{currentBranch}</span>}
           </Button>
         </DropdownMenuTrigger>
         <DropdownMenuContent sideOffset={0} align="end" className="bg-card border-border min-w-[200px]">

frontend/src/components/session/SessionDetailHeader.tsx

@@ -159,6 +159,7 @@ export function SessionDetailHeader({
             repoUrl={repo.repoUrl}
             repoLocalPath={repo.localPath}
             className="max-w-[80px] sm:w-[140px] sm:max-w-[140px]"
+            iconOnly
           />
           <div className="flex items-center gap-1 sm:gap-2">
             <div

frontend/src/pages/RepoDetail.tsx

@@ -123,7 +123,8 @@ export function RepoDetail() {
                   currentBranch={currentBranch}
                   isWorktree={repo.isWorktree}
                   repoUrl={repo.repoUrl}
-                  className="w-[140px] max-w-[140px]"
+                  className="sm:w-[140px] sm:max-w-[140px]"
+                  iconOnly
                 />
               ) : branchToDisplay ? (
                 <Badge