chight/Web-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
vkuchenik
2026-07-22 08:46:58 -07:00
parent 9ee41c9b8a
commit 764bf07ac8
1 changed files with 32 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client/src/components/dashboard/SettingsButton.jsx
+32 -23
View File
@@ -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,31 +70,32 @@ export function SettingsButton() {
<Settings size={18} />
</IconButton>
</Menu.Trigger>
<Menu.Positioner>
<Menu.Content bg="white" boxShadow="lg" borderRadius="md" p={1} zIndex="dropdown">
{isEditing ? (
<>
{/* WIRE DIRECTLY TO saveEdit */}
<Menu.Item onClick={saveEdit} color="green.600" fontWeight="bold" cursor="pointer" _hover={{ bg: "green.50" }}>
<Save size={16} style={{ marginRight: '8px' }} /> Save Layout
</Menu.Item>
<Menu.Content bg="white" boxShadow="lg" borderRadius="md" p={1} zIndex="dropdown">
{isEditing ? (
<>
{/* WIRE DIRECTLY TO saveEdit */}
<Menu.Item onClick={saveEdit} color="green.600" fontWeight="bold" cursor="pointer" _hover={{ bg: "green.50" }}>
<Save size={16} style={{ marginRight: '8px' }} /> Save Layout
<Menu.Item onClick={cancelEdit} color="red.500" cursor="pointer" _hover={{ bg: "red.50" }}>
<X size={16} style={{ marginRight: '8px' }} /> Discard Changes
</Menu.Item>
</>
) : (
<Menu.Item onClick={enterEditMode} cursor="pointer" _hover={{ bg: "gray.100" }}>
<Move size={16} style={{ marginRight: '8px' }} /> Edit Layout
</Menu.Item>
)}
<Menu.Item onClick={cancelEdit} color="red.500" cursor="pointer" _hover={{ bg: "red.50" }}>
<X size={16} style={{ marginRight: '8px' }} /> Discard Changes
</Menu.Item>
</>
) : (
<Menu.Item onClick={enterEditMode} cursor="pointer" _hover={{ bg: "gray.100" }}>
<Move size={16} style={{ marginRight: '8px' }} /> Edit Layout
<Menu.Separator my={1} borderColor="gray.200" />
<Menu.Item onClick={() => setIsLibraryOpen(true)} cursor="pointer" _hover={{ bg: "gray.100" }}>
<LayoutGrid size={16} style={{ marginRight: '8px' }} /> Widget Library
</Menu.Item>
)}
<Menu.Separator my={1} borderColor="gray.200" />
<Menu.Item onClick={() => setIsLibraryOpen(true)} cursor="pointer" _hover={{ bg: "gray.100" }}>
<LayoutGrid size={16} style={{ marginRight: '8px' }} /> Widget Library
</Menu.Item>
</Menu.Content>
</Menu.Content>
</Menu.Positioner>
</Menu.Root>
{/* THE WIDGET LIBRARY MODAL (Controlled by isLibraryOpen) */}