diff --git a/imago-admin/src/pages/admin/Clients.tsx b/imago-admin/src/pages/admin/Clients.tsx index 3682b76..838fb31 100644 --- a/imago-admin/src/pages/admin/Clients.tsx +++ b/imago-admin/src/pages/admin/Clients.tsx @@ -1,4 +1,5 @@ -import { useState } from 'react'; +import { useState, useRef } from 'react'; +import { createPortal } from 'react-dom'; import { Link } from 'react-router-dom'; import { PageLayout } from '@/components/layout/PageLayout'; import { PlanBadge } from '@/components/shared/PlanBadge'; @@ -27,6 +28,8 @@ export default function Clients() { const [showForm, setShowForm] = useState(false); const [confirmDelete, setConfirmDelete] = useState(null); const [activeMenu, setActiveMenu] = useState(null); + const [menuPosition, setMenuPosition] = useState<{ top: number; right: number } | null>(null); + const menuButtonRefs = useRef>(new Map()); const [newApiKey, setNewApiKey] = useState(null); const [keyCopied, setKeyCopied] = useState(false); @@ -203,35 +206,54 @@ export default function Clients() { -
- - {activeMenu === client.id && ( - <> -
setActiveMenu(null)} /> -
- setActiveMenu(null)}> - Voir détail - - setActiveMenu(null)}> - Voir galerie - - -
- -
- - )} -
+ + {activeMenu === client.id && menuPosition && createPortal( + <> +
{ setActiveMenu(null); setMenuPosition(null); }} /> +
+ { setActiveMenu(null); setMenuPosition(null); }}> + Voir détail + + { setActiveMenu(null); setMenuPosition(null); }}> + Voir galerie + + +
+ +
+ , + document.body + )} ))}