From d5994a13cd9489a44c4bee7f851ebc5a1cc93e9a Mon Sep 17 00:00:00 2001
From: Marco Montalbano <marco.montalbano@commercelayer.io>
Date: Thu, 18 Dec 2025 10:44:39 +0100
Subject: [PATCH 1/2] fix: modal zIndex

---
 packages/app-elements/src/ui/composite/Modal.tsx   | 8 ++++----
 packages/app-elements/src/ui/internals/Overlay.tsx | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/app-elements/src/ui/composite/Modal.tsx b/packages/app-elements/src/ui/composite/Modal.tsx
index 05910a551..45e71f662 100644
--- a/packages/app-elements/src/ui/composite/Modal.tsx
+++ b/packages/app-elements/src/ui/composite/Modal.tsx
@@ -85,7 +85,7 @@ export const Modal: React.FC<
             disabled={true}
             type="button"
             aria-label="Close modal"
-            className="fixed inset-0 z-50 bg-gray-900/90 animate-backdrop-fade-in cursor-default"
+            className="fixed inset-0 z-60 bg-gray-900/90 animate-backdrop-fade-in cursor-default"
             onClick={onClose}
             onKeyDown={(e) => {
               if (e.key === "Escape" || e.key === "Enter" || e.key === " ") {
@@ -95,9 +95,9 @@ export const Modal: React.FC<
           />
           <div
             className={cn(
-              "fixed z-50 w-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
-              size === "large" && "max-w-[600px] md:w-[600px]",
-              size === "small" && "max-w-[420px] md:w-[420px]",
+              "fixed z-70 w-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
+              size === "large" && "max-w-150 md:w-150",
+              size === "small" && "max-w-105 md:w-105",
             )}
             data-testid="modal"
           >
diff --git a/packages/app-elements/src/ui/internals/Overlay.tsx b/packages/app-elements/src/ui/internals/Overlay.tsx
index 7123e33e7..ee7bc8586 100644
--- a/packages/app-elements/src/ui/internals/Overlay.tsx
+++ b/packages/app-elements/src/ui/internals/Overlay.tsx
@@ -131,7 +131,7 @@ export const Overlay: React.FC<OverlayProps> = ({
             "bg-gray-50": backgroundColor === "light",
             "bg-white": backgroundColor == null,
             "inset-0 w-full": !drawer,
-            "top-0 right-0 bottom-0 w-full md:w-1/2 max-w-[800px] animate-slide-in-right":
+            "top-0 right-0 bottom-0 w-full md:w-1/2 max-w-200 animate-slide-in-right":
               drawer,
           },
         )}

From 0f6068df0d53b9f46ebffac38acc9f33cfc229a8 Mon Sep 17 00:00:00 2001
From: Marco Montalbano <marco.montalbano@commercelayer.io>
Date: Thu, 18 Dec 2025 11:22:26 +0100
Subject: [PATCH 2/2] fix: update Modal width when size=large

---
 packages/app-elements/src/ui/composite/Modal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/app-elements/src/ui/composite/Modal.tsx b/packages/app-elements/src/ui/composite/Modal.tsx
index 45e71f662..f8bb93b08 100644
--- a/packages/app-elements/src/ui/composite/Modal.tsx
+++ b/packages/app-elements/src/ui/composite/Modal.tsx
@@ -96,7 +96,7 @@ export const Modal: React.FC<
           <div
             className={cn(
               "fixed z-70 w-full top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2",
-              size === "large" && "max-w-150 md:w-150",
+              size === "large" && "max-w-155 md:w-155",
               size === "small" && "max-w-105 md:w-105",
             )}
             data-testid="modal"