Fixed confetti css bug

mozilla · Dec 9, 2024 · 4a76e47 · 4a76e47
1 parent 2f0b7ef
commit 4a76e47
Showing 1 changed file with 33 additions and 33 deletions.
diff --git a/translate/src/modules/editor/components/BadgeTooltip.tsx b/translate/src/modules/editor/components/BadgeTooltip.tsx
@@ -49,46 +49,46 @@ export function BadgeTooltip(): React.ReactElement<'div'> | null {
       colors: [confettiColor, style.getPropertyValue('--tooltip-background')],
       particleCount: 10,
       spread: 55,
+      zIndex: 100,
     };
   };
 
   return (
-    <>
+    <div ref={ref} className={className}>
       <Pride
         autorun={{ speed: 30, duration: 5000 }}
         decorateOptions={decorateOptions}
       />
-      <div ref={ref} className={className}>
-        <Localized id='editor-BadgeTooltip--intro'>
-          <p className='title'>Achievement unlocked</p>
-        </Localized>
-
-        <img className='badge' src={imagePath} />
-
-        <p className='badge-name'>{badgeName}</p>
-
-        <Localized
-          id='editor-BadgeTooltip--level'
-          vars={{ badgeLevel: badgeLevel ?? 0 }}
-        >
-          <p className='badge-level'>Level {badgeLevel}</p>
-        </Localized>
-
-        <Localized
-          id='editor-BadgeTooltip--profile'
-          elems={{ a: <a href={`/contributors/${user}`} /> }}
-        >
-          <p className='notice'>
-            {'View your new badge in your <a>profile</a>.'}
-          </p>
-        </Localized>
-
-        <Localized id='editor-BadgeTooltip--continue'>
-          <button className='continue' onClick={hide}>
-            Continue
-          </button>
-        </Localized>
-      </div>
-    </>
+
+      <Localized id='editor-BadgeTooltip--intro'>
+        <p className='title'>Achievement unlocked</p>
+      </Localized>
+
+      <img className='badge' src={imagePath} />
+
+      <p className='badge-name'>{badgeName}</p>
+
+      <Localized
+        id='editor-BadgeTooltip--level'
+        vars={{ badgeLevel: badgeLevel ?? 0 }}
+      >
+        <p className='badge-level'>Level {badgeLevel}</p>
+      </Localized>
+
+      <Localized
+        id='editor-BadgeTooltip--profile'
+        elems={{ a: <a href={`/contributors/${user}`} /> }}
+      >
+        <p className='notice'>
+          {'View your new badge in your <a>profile</a>.'}
+        </p>
+      </Localized>
+
+      <Localized id='editor-BadgeTooltip--continue'>
+        <button className='continue' onClick={hide}>
+          Continue
+        </button>
+      </Localized>
+    </div>
   );
 }