From 792ac4c3b2627a1c327e49796015beaf4d25e6e1 Mon Sep 17 00:00:00 2001
From: Yann Braga <yannbf@gmail.com>
Date: Wed, 18 Dec 2024 11:12:23 +0100
Subject: [PATCH] Add a wrapper

---
 .../src/components/Confetti/Confetti.tsx      | 29 ++++++++++++++-----
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/code/addons/onboarding/src/components/Confetti/Confetti.tsx b/code/addons/onboarding/src/components/Confetti/Confetti.tsx
index e5e04628193d..90604bd1ce05 100644
--- a/code/addons/onboarding/src/components/Confetti/Confetti.tsx
+++ b/code/addons/onboarding/src/components/Confetti/Confetti.tsx
@@ -1,8 +1,19 @@
 import React, { type ComponentProps, useEffect } from 'react';
 import { useState } from 'react';
 
+import { styled } from 'storybook/internal/theming';
+
 import ReactConfetti from 'react-confetti-boom';
 
+const Wrapper = styled.div({
+  zIndex: 9999,
+  position: 'fixed',
+  top: 0,
+  left: 0,
+  bottom: 0,
+  right: 0,
+});
+
 export function Confetti({
   timeToFade = 5000,
   colors = ['#CA90FF', '#FC521F', '#66BF3C', '#FF4785', '#FFAE00', '#1EA7FD'],
@@ -21,13 +32,15 @@ export function Confetti({
   }, [timeToFade]);
 
   return (
-    <ReactConfetti
-      mode="fall"
-      colors={colors}
-      shapeSize={14}
-      particleCount={particleCount}
-      fadeOutHeight={10}
-      {...confettiProps}
-    />
+    <Wrapper>
+      <ReactConfetti
+        mode="fall"
+        colors={colors}
+        shapeSize={14}
+        particleCount={particleCount}
+        fadeOutHeight={10}
+        {...confettiProps}
+      />
+    </Wrapper>
   );
 }