diff --git a/frontend/src/app/pages/DashboardSelection/DashboardSelection.tsx b/frontend/src/app/pages/DashboardSelection/DashboardSelection.tsx index c15d59eb..c935d2b4 100644 --- a/frontend/src/app/pages/DashboardSelection/DashboardSelection.tsx +++ b/frontend/src/app/pages/DashboardSelection/DashboardSelection.tsx @@ -54,6 +54,7 @@ const DashboardSelection: React.FC = () => { const [search, setSearch] = useState(''); const [menuAnchor, setMenuAnchor] = useState(null); + const [menuPosition, setMenuPosition] = useState<{ top: number; left: number } | null>(null); const [menuDashboard, setMenuDashboard] = useState(null); const [renamingId, setRenamingId] = useState(null); const [renameValue, setRenameValue] = useState(''); @@ -100,8 +101,17 @@ const DashboardSelection: React.FC = () => { setMenuDashboard(d); }; + // Right-click anywhere on a card opens the same menu at the cursor, Mac-style. + const handleContextMenu = (e: React.MouseEvent, d: Dashboard) => { + e.preventDefault(); + e.stopPropagation(); + setMenuPosition({ top: e.clientY, left: e.clientX }); + setMenuDashboard(d); + }; + const handleCloseMenu = () => { setMenuAnchor(null); + setMenuPosition(null); setMenuDashboard(null); }; @@ -225,6 +235,7 @@ const DashboardSelection: React.FC = () => { if (renamingId === d.id) return; navigate(`/dashboard/${d.id}`); }} + onContextMenu={(e) => handleContextMenu(e, d)} sx={{ cursor: renamingId === d.id ? 'default' : 'pointer', borderRadius: 3, @@ -344,7 +355,9 @@ const DashboardSelection: React.FC = () => {