diff --git a/frontend/src/pages/WorkflowPage.tsx b/frontend/src/pages/WorkflowPage.tsx index 58c8873..201dbdd 100644 --- a/frontend/src/pages/WorkflowPage.tsx +++ b/frontend/src/pages/WorkflowPage.tsx @@ -1,4 +1,4 @@ -import { useState, useEffect, useCallback } from 'react'; +import { useState, useEffect, useCallback, useRef } from 'react'; import { Plus, Edit2, Eye, ToggleLeft, ToggleRight, GitBranch, Users, CheckCircle, ArrowRight, Shield, Trash2, X, ChevronDown, ChevronUp, @@ -99,15 +99,30 @@ interface UserDropdownProps { function UserDropdown({ users, selectedIds, label, onToggle, onToggleAll, onClear, getUserName }: UserDropdownProps) { const [open, setOpen] = useState(false); + const triggerRef = useRef(null); const ids = Array.isArray(selectedIds) ? selectedIds : []; const allSelected = ids.length === users.length && users.length > 0; + const [dropdownPos, setDropdownPos] = useState({ top: 0, left: 0, width: 0 }); + + const updatePos = () => { + if (triggerRef.current) { + const rect = triggerRef.current.getBoundingClientRect(); + setDropdownPos({ top: rect.bottom + 4, left: rect.left, width: rect.width }); + } + }; + + const handleToggle = () => { + if (!open) updatePos(); + setOpen(!open); + }; return (
{/* Trigger */}
)} - {/* Dropdown */} + {/* Dropdown — fixed positioning to escape overflow clipping */} {open && ( <>
setOpen(false)} /> -
+
{/* Select all / Clear */}