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 { import {
Button, Button,
IconButton, IconButton,
@@ -46,12 +46,20 @@ export function SettingsButton() {
const categories = Object.keys(categorizedWidgets); 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 ( return (
<> <>
{/* THE STATIC DROPDOWN MENU */} {/* THE STATIC DROPDOWN MENU */}
<Menu.Root> <Menu.Root positioning={{ getAnchorRect }}>
<Menu.Trigger asChild> <Menu.Trigger asChild>
<IconButton <IconButton
ref={menuRef}
aria-label="Settings" aria-label="Settings"
bg="vdap.darkGreen" bg="vdap.darkGreen"
color="white" color="white"
@@ -62,31 +70,32 @@ export function SettingsButton() {
<Settings size={18} /> <Settings size={18} />
</IconButton> </IconButton>
</Menu.Trigger> </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"> <Menu.Item onClick={cancelEdit} color="red.500" cursor="pointer" _hover={{ bg: "red.50" }}>
{isEditing ? ( <X size={16} style={{ marginRight: '8px' }} /> Discard Changes
<> </Menu.Item>
{/* 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={enterEditMode} cursor="pointer" _hover={{ bg: "gray.100" }}>
<Move size={16} style={{ marginRight: '8px' }} /> Edit Layout
</Menu.Item> </Menu.Item>
)}
<Menu.Item onClick={cancelEdit} color="red.500" cursor="pointer" _hover={{ bg: "red.50" }}> <Menu.Separator my={1} borderColor="gray.200" />
<X size={16} style={{ marginRight: '8px' }} /> Discard Changes
</Menu.Item> <Menu.Item onClick={() => setIsLibraryOpen(true)} cursor="pointer" _hover={{ bg: "gray.100" }}>
</> <LayoutGrid size={16} style={{ marginRight: '8px' }} /> Widget Library
) : (
<Menu.Item onClick={enterEditMode} cursor="pointer" _hover={{ bg: "gray.100" }}>
<Move size={16} style={{ marginRight: '8px' }} /> Edit Layout
</Menu.Item> </Menu.Item>
)} </Menu.Content>
</Menu.Positioner>
<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.Root> </Menu.Root>
{/* THE WIDGET LIBRARY MODAL (Controlled by isLibraryOpen) */} {/* THE WIDGET LIBRARY MODAL (Controlled by isLibraryOpen) */}