From 870db45167b05c19cd37dc702be66abe9410b9dd Mon Sep 17 00:00:00 2001
From: Norbert de Langen <ndelangen@me.com>
Date: Tue, 23 Jan 2024 14:16:03 +0100
Subject: [PATCH] add z-index wrapper

---
 src/features/WelcomeModal/WelcomeModal.tsx | 54 +++++++++++-----------
 1 file changed, 28 insertions(+), 26 deletions(-)

diff --git a/src/features/WelcomeModal/WelcomeModal.tsx b/src/features/WelcomeModal/WelcomeModal.tsx
index 17fa675..c2c1236 100644
--- a/src/features/WelcomeModal/WelcomeModal.tsx
+++ b/src/features/WelcomeModal/WelcomeModal.tsx
@@ -26,31 +26,33 @@ export const WelcomeModal: FC<WelcomeModalProps> = ({
   skipOnboarding,
 }) => {
   return (
-    <Modal width={540} height={430} defaultOpen>
-      {({ Close }) => (
-        <ModalContentWrapper data-chromatic="ignore">
-          <TopContent>
-            <StorybookLogo />
-            <Title>Welcome to Storybook</Title>
-            <Description>
-              Storybook helps you develop UI components faster. Learn the basics in a
-              few simple steps.
-            </Description>
-            <Button style={{ marginTop: 4 }} onClick={onProceed}>
-              Start your 3 minute tour
-            </Button>
-          </TopContent>
-          <SkipButton onClick={skipOnboarding}>
-            Skip tour
-            <StyledIcon icon="arrowright" />
-          </SkipButton>
-          <Background>
-            <Circle1 />
-            <Circle2 />
-            <Circle3 />
-          </Background>
-        </ModalContentWrapper>
-      )}
-    </Modal>
+    <div style={{ zIndex: 10 }}>
+      <Modal width={540} height={430} defaultOpen>
+        {({ Close }) => (
+          <ModalContentWrapper data-chromatic="ignore">
+            <TopContent>
+              <StorybookLogo />
+              <Title>Welcome to Storybook</Title>
+              <Description>
+                Storybook helps you develop UI components faster. Learn the
+                basics in a few simple steps.
+              </Description>
+              <Button style={{ marginTop: 4 }} onClick={onProceed}>
+                Start your 3 minute tour
+              </Button>
+            </TopContent>
+            <SkipButton onClick={skipOnboarding}>
+              Skip tour
+              <StyledIcon icon="arrowright" />
+            </SkipButton>
+            <Background>
+              <Circle1 />
+              <Circle2 />
+              <Circle3 />
+            </Background>
+          </ModalContentWrapper>
+        )}
+      </Modal>
+    </div>
   );
 };