From 1209eaad3ea3804fde6ce3f39d77d19939f190b8 Mon Sep 17 00:00:00 2001
From: Kacper Krzywiec <krzywiec@gmail.com>
Date: Wed, 8 May 2024 10:57:18 +0200
Subject: [PATCH 1/2] fix: indendation level of modals

refactor: inside
---
 .changeset/tasty-readers-mate.md              |  5 ++++
 .../hooks/use-modal-state/use-modal-state.ts  | 23 ++++++++++++++++++-
 2 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/tasty-readers-mate.md

diff --git a/.changeset/tasty-readers-mate.md b/.changeset/tasty-readers-mate.md
new file mode 100644
index 0000000000..e0be17df6a
--- /dev/null
+++ b/.changeset/tasty-readers-mate.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-frontend/application-components': patch
+---
+
+Use correct indentation level for modals rendered in portals container
diff --git a/packages/application-components/src/hooks/use-modal-state/use-modal-state.ts b/packages/application-components/src/hooks/use-modal-state/use-modal-state.ts
index ea8710c91a..8a5b0bee7b 100644
--- a/packages/application-components/src/hooks/use-modal-state/use-modal-state.ts
+++ b/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);
 
+  // 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(() => {
+    const PORTALS_CONTAINER_OBSERVER_TRIGGER_ID =
+      'stacking-layer-observer-trigger';
+    if (isModalOpen) {
+      const newDiv = document.createElement('div');
+      newDiv.setAttribute('id', PORTALS_CONTAINER_OBSERVER_TRIGGER_ID);
+      const portalsContainer = document.querySelector(
+        `div#${PORTALS_CONTAINER_ID}`
+      );
+      portalsContainer?.appendChild(newDiv);
+    } else {
+      const trigger = document.querySelector(
+        `div#${PORTALS_CONTAINER_OBSERVER_TRIGGER_ID}`
+      );
+      trigger?.remove();
+    }
+  }, [isModalOpen]);
+
   const openModal = useCallback(() => setIsModalOpen(true), []);
   const closeModal = useCallback(() => setIsModalOpen(false), []);
 

From f289bba7ac96b867adab7e92a83dda4d3dbff710 Mon Sep 17 00:00:00 2001
From: Kacper Krzywiec <krzywiec@gmail.com>
Date: Thu, 9 May 2024 10:23:26 +0200
Subject: [PATCH 2/2] refactor: remove all

---
 .../src/hooks/use-modal-state/use-modal-state.ts     | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/application-components/src/hooks/use-modal-state/use-modal-state.ts b/packages/application-components/src/hooks/use-modal-state/use-modal-state.ts
index 8a5b0bee7b..29b6a24832 100644
--- a/packages/application-components/src/hooks/use-modal-state/use-modal-state.ts
+++ b/packages/application-components/src/hooks/use-modal-state/use-modal-state.ts
@@ -1,26 +1,26 @@
 import { useState, useCallback, useEffect } from 'react';
 import { PORTALS_CONTAINER_ID } from '@commercetools-frontend/constants';
 
+const PORTALS_CONTAINER_MUTATION_TRIGGER = 'portals-container-mutation-trigger';
+
 const useModalState = (isInitiallyOpen = false) => {
   const [isModalOpen, setIsModalOpen] = useState(isInitiallyOpen);
 
   // 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(() => {
-    const PORTALS_CONTAINER_OBSERVER_TRIGGER_ID =
-      'stacking-layer-observer-trigger';
     if (isModalOpen) {
       const newDiv = document.createElement('div');
-      newDiv.setAttribute('id', PORTALS_CONTAINER_OBSERVER_TRIGGER_ID);
+      newDiv.dataset.role = PORTALS_CONTAINER_MUTATION_TRIGGER;
       const portalsContainer = document.querySelector(
         `div#${PORTALS_CONTAINER_ID}`
       );
       portalsContainer?.appendChild(newDiv);
     } else {
-      const trigger = document.querySelector(
-        `div#${PORTALS_CONTAINER_OBSERVER_TRIGGER_ID}`
+      const triggers = document.querySelectorAll(
+        `div[data-role="${PORTALS_CONTAINER_MUTATION_TRIGGER}"]`
       );
-      trigger?.remove();
+      triggers.forEach((trigger) => trigger.remove());
     }
   }, [isModalOpen]);