[3030] Fix palette position when multiple diagrams are open

Bug: #3030
Signed-off-by: Pierre-Charles David <pierre-charles.david@obeo.fr>

CHANGELOG.adoc

@@ -40,6 +40,7 @@ As a result, all the APIs relying on this code have been deleted too such as the
 - https://github.com/eclipse-sirius/sirius-web/issues/2822[#2822] [diagram] Prevent direct edit to be triggered on edge if there is no edit label tool corresponding
 - https://github.com/eclipse-sirius/sirius-web/issues/3061[#3061] [form] Ensure Forms are always refreshed using the _current_ version of their target element
 - https://github.com/eclipse-sirius/sirius-web/issues/3052[#3052] [diagram] Fix an issue that prevented user from reconnecting an edge.
+- https://github.com/eclipse-sirius/sirius-web/issues/3030[#3030] [diagram] Fix the position of the palette when multiple diagrams are open at the same time (e.g. inside a portal)
 
 === New Features
 

packages/diagrams/frontend/sirius-components-diagrams/src/renderer/palette/PalettePortal.tsx

@@ -12,6 +12,7 @@
  *******************************************************************************/
 
 import { createPortal } from 'react-dom';
+import { useStoreApi } from 'reactflow';
 import { PalettePortalProps } from './PalettePortal.types';
 
 //The sibling dom element .react-flow__renderer have a zIndex of 4, so we set it here to 5 to have the palette in front of the diagram.
@@ -21,7 +22,7 @@ const palettePortalStyle: React.CSSProperties = {
 };
 
 export const PalettePortal = ({ children }: PalettePortalProps) => {
-  const wrapperRef = document.querySelector('.react-flow');
+  const wrapperRef = useStoreApi().getState().domNode;
 
   if (!wrapperRef) {
     return null;