fix: indendation level of modals

.changeset/tasty-readers-mate.md

@@ -0,0 +1,5 @@
+---
+'@commercetools-frontend/application-components': patch
+---
+
+Use correct indentation level for modals rendered in portals container

packages/application-components/src/hooks/use-modal-state/use-modal-state.ts

@@ -1,8 +1,29 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback, useEffect } from 'react';
+import { PORTALS_CONTAINER_ID } from '@commercetools-frontend/constants';
 
 const useModalState = (isInitiallyOpen = false) => {
   const [isModalOpen, setIsModalOpen] = useState(isInitiallyOpen);
 
+  const PORTALS_CONTAINER_OBSERVER_TRIGGER_ID =
+    'stacking-layer-observer-trigger';
+  const portalsContainer = document.querySelector(
+    `div#${PORTALS_CONTAINER_ID}`
+  );
+  // This is a workaround to make sure the portals container's Mutation Observer picks up a DOM mutation when the modal is opened
+  // This is neccessary to make sure the modal stacking layer's indentation level is correctly calculated
+  useEffect(() => {
+    if (isModalOpen) {
+      const newDiv = document.createElement('div');
+      newDiv.setAttribute('id', PORTALS_CONTAINER_OBSERVER_TRIGGER_ID);
+      portalsContainer?.appendChild(newDiv);
+    } else {
+      const trigger = document.querySelector(
+        `div#${PORTALS_CONTAINER_OBSERVER_TRIGGER_ID}`
+      );
+      trigger?.remove();
+    }
+  }, [isModalOpen, portalsContainer]);
+
   const openModal = useCallback(() => setIsModalOpen(true), []);
   const closeModal = useCallback(() => setIsModalOpen(false), []);