fix: anchor picker menus to ButtonGroup, remove overflow hidden

apps/code/src/renderer/features/folder-picker/components/FolderPicker.tsx

@@ -15,18 +15,21 @@ import {
   MenuLabel,
 } from "@posthog/quill";
 import { trpcClient } from "@renderer/trpc";
+import type { RefObject } from "react";
 
 interface FolderPickerProps {
   value: string;
   onChange: (path: string) => void;
   placeholder?: string;
   size?: "1" | "2";
+  anchor?: RefObject<HTMLElement | null>;
 }
 
 export function FolderPicker({
   value,
   onChange,
   placeholder = "Select folder...",
+  anchor,
 }: FolderPickerProps) {
   const {
     getRecentFolders,
@@ -85,6 +88,7 @@ export function FolderPicker({
         }
       />
       <DropdownMenuContent
+        anchor={anchor}
         align="start"
         side="bottom"
         sideOffset={6}

apps/code/src/renderer/features/folder-picker/components/GitHubRepoPicker.tsx

@@ -9,6 +9,7 @@ import {
   ComboboxList,
   ComboboxTrigger,
 } from "@posthog/quill";
+import type { RefObject } from "react";
 
 interface GitHubRepoPickerProps {
   value: string | null;
@@ -18,6 +19,7 @@ interface GitHubRepoPickerProps {
   placeholder?: string;
   size?: "1" | "2";
   disabled?: boolean;
+  anchor?: RefObject<HTMLElement | null>;
 }
 
 export function GitHubRepoPicker({
@@ -27,6 +29,7 @@ export function GitHubRepoPicker({
   isLoading,
   placeholder = "Select repository...",
   disabled = false,
+  anchor,
 }: GitHubRepoPickerProps) {
   if (isLoading) {
     return (
@@ -68,7 +71,12 @@ export function GitHubRepoPicker({
           </Button>
         }
       />
-      <ComboboxContent side="bottom" sideOffset={6} className="min-w-[280px]">
+      <ComboboxContent
+        anchor={anchor}
+        side="bottom"
+        sideOffset={6}
+        className="min-w-[280px]"
+      >
         <ComboboxInput placeholder="Search repositories..." />
         <ComboboxEmpty>No repositories found.</ComboboxEmpty>
         <ComboboxList>

apps/code/src/renderer/features/git-interaction/components/BranchSelector.tsx

@@ -16,7 +16,7 @@ import {
 import { useTRPC } from "@renderer/trpc";
 import { toast } from "@renderer/utils/toast";
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { useEffect, useRef, useState } from "react";
+import { type RefObject, useEffect, useRef, useState } from "react";
 
 interface BranchSelectorProps {
   repoPath: string | null;
@@ -34,6 +34,7 @@ interface BranchSelectorProps {
   onCloudPickerOpen?: () => void;
   onCloudBranchCommit?: () => void;
   taskId?: string;
+  anchor?: RefObject<HTMLElement | null>;
 }
 
 export function BranchSelector({
@@ -51,9 +52,10 @@ export function BranchSelector({
   onCloudPickerOpen,
   onCloudBranchCommit,
   taskId,
+  anchor,
 }: BranchSelectorProps) {
   const [open, setOpen] = useState(false);
-  const anchorRef = useRef<HTMLButtonElement>(null);
+  const localAnchorRef = useRef<HTMLButtonElement>(null);
   const trpc = useTRPC();
   const { actions } = useGitInteractionStore();
 
@@ -149,7 +151,7 @@ export function BranchSelector({
       <ComboboxTrigger
         render={
           <Button
-            ref={anchorRef}
+            ref={localAnchorRef}
             variant="outline"
             size="sm"
             disabled={isDisabled}
@@ -171,7 +173,7 @@ export function BranchSelector({
         }
       />
       <ComboboxContent
-        anchor={anchorRef}
+        anchor={anchor ?? localAnchorRef}
         side="bottom"
         sideOffset={6}
         className="min-w-[240px]"

apps/code/src/renderer/features/task-detail/components/TaskInput.tsx

@@ -73,6 +73,7 @@ export function TaskInput({
 
   const editorRef = useRef<EditorHandle>(null);
   const containerRef = useRef<HTMLDivElement>(null);
+  const buttonGroupRef = useRef<HTMLDivElement>(null);
   const dragCounterRef = useRef(0);
 
   const [editorIsEmpty, setEditorIsEmpty] = useState(true);
@@ -404,7 +405,6 @@ export function TaskInput({
         position: "relative",
         height: "100%",
         width: "100%",
-        overflow: "hidden",
       }}
       onDragEnter={handleDragEnter}
       onDragLeave={handleDragLeave}
@@ -459,11 +459,7 @@ export function TaskInput({
             zIndex: 1,
           }}
         >
-          <Flex
-            gap="2"
-            align="center"
-            style={{ minWidth: 0, overflow: "hidden" }}
-          >
+          <Flex gap="2" align="center" style={{ minWidth: 0 }}>
             <WorkspaceModeSelect
               value={workspaceMode}
               onChange={setWorkspaceMode}
@@ -479,7 +475,7 @@ export function TaskInput({
                 disabled={isCreatingTask}
               />
             )}
-            <ButtonGroup>
+            <ButtonGroup ref={buttonGroupRef}>
               {workspaceMode === "cloud" ? (
                 <GitHubRepoPicker
                   value={selectedRepository}
@@ -489,13 +485,15 @@ export function TaskInput({
                   placeholder="Select repository..."
                   size="1"
                   disabled={isCreatingTask}
+                  anchor={buttonGroupRef}
                 />
               ) : (
                 <FolderPicker
                   value={selectedDirectory}
                   onChange={setSelectedDirectory}
                   placeholder="Select repository..."
                   size="1"
+                  anchor={buttonGroupRef}
                 />
               )}
               <BranchSelector
@@ -521,6 +519,7 @@ export function TaskInput({
                 cloudBranchesFetchingMore={cloudBranchesFetchingMore}
                 onCloudPickerOpen={resumeCloudBranchesLoading}
                 onCloudBranchCommit={pauseCloudBranchesLoading}
+                anchor={buttonGroupRef}
               />
             </ButtonGroup>
             {cloudRegion === "dev" && (