fix(folder): prevent branch submenu from being clipped in scroll area

src/components/layout/branch-dropdown.tsx

@@ -146,7 +146,6 @@ export function BranchDropdown({
   const [localOpen, setLocalOpen] = useState(false)
   const [remoteOpen, setRemoteOpen] = useState(false)
   const [confirmAction, setConfirmAction] = useState<ConfirmAction | null>(null)
-  const [expandedBranch, setExpandedBranch] = useState<string | null>(null)
   const [worktreeOpen, setWorktreeOpen] = useState(false)
   const [worktreeBranchName, setWorktreeBranchName] = useState("")
   const [worktreePath, setWorktreePath] = useState("")
@@ -299,7 +298,6 @@ export function BranchDropdown({
     if (!open) {
       setLocalOpen(false)
       setRemoteOpen(false)
-      setExpandedBranch(null)
     }
   }
 
@@ -512,27 +510,10 @@ export function BranchDropdown({
     }
 
     return (
-      <DropdownMenuSub
+      <DropdownMenuSub key={b}>
-        key={b}
-        open={expandedBranch === b}
-        onOpenChange={(open) => {
-          if (!open) setExpandedBranch(null)
-        }}
-      >
         <DropdownMenuSubTrigger
           className="hover:bg-accent hover:text-accent-foreground"
           disabled={loading}
-          onClick={() => setExpandedBranch(expandedBranch === b ? null : b)}
-          onPointerMove={(e) => {
-            e.preventDefault()
-            if (expandedBranch !== null && expandedBranch !== b) {
-              setExpandedBranch(null)
-              if (document.activeElement instanceof HTMLElement) {
-                document.activeElement.blur()
-              }
-            }
-          }}
-          onPointerLeave={(e) => e.preventDefault()}
         >
           <BranchIcon className="h-3.5 w-3.5" />
           {label}

src/components/ui/dropdown-menu.tsx

@@ -243,14 +243,16 @@ function DropdownMenuSubContent({
   ...props
 }: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
   return (
-    <DropdownMenuPrimitive.SubContent
+    <DropdownMenuPrimitive.Portal>
-      data-slot="dropdown-menu-sub-content"
+      <DropdownMenuPrimitive.SubContent
-      className={cn(
+        data-slot="dropdown-menu-sub-content"
-        "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground min-w-36 rounded-2xl p-1 shadow-2xl ring-1 duration-100 z-50 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden",
+        className={cn(
-        className
+          "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground min-w-36 rounded-2xl p-1 shadow-2xl ring-1 duration-100 z-50 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden",
-      )}
+          className
-      {...props}
+        )}
-    />
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
   )
 }