Merge pull request #82 from storybookjs/norbert/fix-z-index

Fix z-index bug by adding a wrapper
storybookjs · Jan 23, 2024 · 08ed7fc · 08ed7fc
2 parents b82da02 + 870db45
commit 08ed7fc
Showing 1 changed file with 28 additions and 26 deletions.
diff --git 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>
   );
 };