All changes

frontend/src/hooks/useDropdownPosition.ts

@@ -0,0 +1,28 @@
+import { useCallback, useLayoutEffect, useState } from 'react';
+import type React from 'react';
+
+export function useDropdownPosition(
+  anchorRef: React.RefObject<HTMLElement | null>,
+  open: boolean,
+) {
+  const [pos, setPos] = useState<{ top: number; left: number; width: number } | null>(null);
+
+  const update = useCallback(() => {
+    if (!anchorRef.current) return;
+    const rect = anchorRef.current.getBoundingClientRect();
+    setPos({ top: rect.bottom + 4, left: rect.left, width: rect.width });
+  }, [anchorRef]);
+
+  useLayoutEffect(() => {
+    if (!open) return;
+    update();
+    window.addEventListener('scroll', update, true);
+    window.addEventListener('resize', update);
+    return () => {
+      window.removeEventListener('scroll', update, true);
+      window.removeEventListener('resize', update);
+    };
+  }, [open, update]);
+
+  return pos;
+}