From 56827bbd4ee0f4e0982610757a969e44901d9a86 Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Tue, 3 Feb 2026 10:02:19 +0100
Subject: [PATCH] fix a minor zindex problem with popovers and modals nesting

---
 .../components/Popover/Popover.stories.tsx    | 31 +++++++++----------
 1 file changed, 15 insertions(+), 16 deletions(-)

diff --git a/code/core/src/components/components/Popover/Popover.stories.tsx b/code/core/src/components/components/Popover/Popover.stories.tsx
index fff1ee278c72..12fa9bd80c22 100644
--- a/code/core/src/components/components/Popover/Popover.stories.tsx
+++ b/code/core/src/components/components/Popover/Popover.stories.tsx
@@ -148,26 +148,25 @@ export const WithoutColor = meta.story({
   },
 });
 
-const PopoverWithModal = () => {
-  const [isOpen, setIsOpen] = useState(false);
-  return (
-    <div>
-      <Button ariaLabel={false} onClick={() => setIsOpen(true)}>
-        Open modal
-      </Button>
-      <Modal open={isOpen} onOpenChange={setIsOpen}>
-        <div>Hello</div>
-      </Modal>
-    </div>
-  );
-};
-
 export const WithModal = meta.story({
   render: () => {
-    const [isPopoverOpen, setIsPopoverOpen] = useState(true);
+    const [isPopoverOpen] = useState(true);
+    const [isModalOpen, setIsModalOpen] = useState(false);
     return (
       <>
-        <PopoverProvider visible={isPopoverOpen} popover={<PopoverWithModal />}>
+        <PopoverProvider
+          visible={isPopoverOpen}
+          popover={
+            <div>
+              <Button ariaLabel={false} onClick={() => setIsModalOpen(true)}>
+                Open modal
+              </Button>
+              <Modal open={isModalOpen} onOpenChange={setIsModalOpen}>
+                <div>Hello</div>
+              </Modal>
+            </div>
+          }
+        >
           <Button ariaLabel={false}>Open popover</Button>
         </PopoverProvider>
         <div style={{ width: 100, height: 100, backgroundColor: 'thistle' }}></div>