Fixed weird menu positioning on open, now opens below settings button

client/src/components/dashboard/SettingsButton.jsx

@@ -1,4 +1,4 @@
-import { useState, useMemo } from "react";
+import { useState, useMemo, useRef } from "react";
 import {
     Button,
     IconButton,
@@ -46,12 +46,20 @@ export function SettingsButton() {
 
     const categories = Object.keys(categorizedWidgets);
 
+    // use ref to capture html node for placing menu accordingly
+    const menuRef = useRef(null);
+    const getAnchorRect = () => {
+        if (!menuRef.current) return null;
+        return menuRef.current.getBoundingClientRect();
+    };
+
     return (
         <>
             {/* THE STATIC DROPDOWN MENU */}
-            <Menu.Root>
+            <Menu.Root positioning={{ getAnchorRect }}>
                 <Menu.Trigger asChild>
                     <IconButton
+                        ref={menuRef}
                         aria-label="Settings"
                         bg="vdap.darkGreen"
                         color="white"
@@ -62,7 +70,7 @@ export function SettingsButton() {
                         <Settings size={18} />
                     </IconButton>
                 </Menu.Trigger>
-
+                <Menu.Positioner>
                     <Menu.Content bg="white" boxShadow="lg" borderRadius="md" p={1} zIndex="dropdown">
                         {isEditing ? (
                             <>
@@ -87,6 +95,7 @@ export function SettingsButton() {
                             <LayoutGrid size={16} style={{ marginRight: '8px' }} /> Widget Library
                         </Menu.Item>
                     </Menu.Content>
+                </Menu.Positioner>
             </Menu.Root>
 
             {/* THE WIDGET LIBRARY MODAL (Controlled by isLibraryOpen) */}