(feat:docs) adding view option

frontend/src/components/DropdownMenu.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import ReactDOM from 'react-dom';
 
 type DropdownMenuProps = {
   name: string;
@@ -10,7 +11,9 @@ type DropdownMenuProps = {
   onOpenChange?: (isOpen: boolean) => void;
   anchorRef?: React.RefObject<HTMLElement>;
   className?: string;
-  position?: 'left' | 'right';
+  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+  offset?: { x: number; y: number };
+  contextMenuAdjacent?: boolean; // New prop to indicate if it should position next to context menu
 };
 
 export default function DropdownMenu({
@@ -22,8 +25,10 @@ export default function DropdownMenu({
   isOpen: controlledIsOpen,
   onOpenChange,
   anchorRef,
-  className,
-  position = 'left',
+  className = '',
+  position = 'bottom-right',
+  offset = { x: 0, y: 8 },
+  contextMenuAdjacent = false, // Default to false for backward compatibility
 }: DropdownMenuProps) {
   const dropdownRef = React.useRef<HTMLDivElement>(null);
   const [internalIsOpen, setInternalIsOpen] = React.useState(false);
@@ -38,7 +43,8 @@ export default function DropdownMenu({
   const handleClickOutside = (event: MouseEvent) => {
     if (
       dropdownRef.current &&
-      !dropdownRef.current.contains(event.target as Node)
+      !dropdownRef.current.contains(event.target as Node) &&
+      !anchorRef?.current?.contains(event.target as Node)
     ) {
       setIsOpen(false);
     }
@@ -51,20 +57,62 @@ export default function DropdownMenu({
   };
 
   React.useEffect(() => {
-    document.addEventListener('mousedown', handleClickOutside);
-    return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
-    };
-  }, []);
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      return () =>
+        document.removeEventListener('mousedown', handleClickOutside);
+    }
+  }, [isOpen]);
 
-  return (
-    <div className={`fixed ${className || ''}`} ref={dropdownRef}>
+  if (!isOpen) return null;
+
+  const getMenuPosition = (): React.CSSProperties => {
+    if (!anchorRef?.current) return {};
+
+    const rect = anchorRef.current.getBoundingClientRect();
+
+    // Default positioning
+    let top = rect.bottom + offset.y;
+    let left = rect.right + offset.x;
+
+    if (contextMenuAdjacent) {
+      // Position to the left of the context menu
+      left = rect.left - 50; // Width of dropdown + some spacing
+      top = rect.top; // Align tops
+    } else {
+      // Standard positioning based on position prop
+      switch (position) {
+        case 'bottom-left':
+          left = rect.left - offset.x;
+          break;
+        case 'top-right':
+          top = rect.top - offset.y;
+          break;
+        case 'top-left':
+          top = rect.top - offset.y;
+          left = rect.left - offset.x;
+          break;
+        // bottom-right is default
+      }
+    }
+
+    return {
+      position: 'fixed',
+      top: `${top}px`,
+      left: `${left}px`,
+      zIndex: 9999,
+    };
+  };
+
+  // Use a portal to render the dropdown outside the table flow
+  return ReactDOM.createPortal(
+    <div
+      ref={dropdownRef}
+      style={{ ...getMenuPosition() }}
+      onClick={(e) => e.stopPropagation()}
+    >
       <div
-        className={`w-28 transform rounded-md bg-white dark:bg-dark-charcoal shadow-lg ring-1 ring-black ring-opacity-5 transition-all duration-200 ease-in-out ${
-          isOpen
-            ? 'scale-100 opacity-100'
-            : 'pointer-events-none scale-95 opacity-0'
-        }`}
+        className={`w-28 transform rounded-md bg-white dark:bg-dark-charcoal shadow-lg ring-1 ring-black ring-opacity-5 transition-all duration-200 ease-in-out ${className}`}
       >
         <div
           role="menu"
@@ -89,6 +137,7 @@ export default function DropdownMenu({
           ))}
         </div>
       </div>
-    </div>
+    </div>,
+    document.body,
   );
 }