fix: showing the chanelog popup above the ad

Author: medyo

src/features/adv/components/AdvBanner.css

@@ -10,7 +10,7 @@
   align-items: center;
   justify-content: center;
   max-width: 330px;
-  z-index: 1;
+  z-index: 0;
   margin: 0 auto;
 }
 .banneradv a {
@@ -122,7 +122,7 @@
   aspect-ratio: 1;
   height: fit-content;
   width: 45%;
-  z-index: 2;
+  z-index: 1;
   object-fit: cover;
   border-radius: 10px;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

src/features/changelog/components/Changelog.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useState } from 'react'
+import { createPortal } from 'react-dom'
 import { HiSparkles } from 'react-icons/hi'
 import ReactMarkdown from 'react-markdown'
 import BeatLoader from 'react-spinners/BeatLoader'
@@ -67,26 +68,30 @@ export const Changelog = () => {
   }, [versions])
   return (
     <>
-      <ReactTooltip
-        id={tooltipId}
-        event="click"
-        scrollHide={false}
-        afterShow={() => {
-          setTooltipShown(true)
-        }}
-        place="bottom"
-        className="changelogTooltip scrollable"
-        globalEventOff="click">
-        {isLoading ? (
-          <div className="tooltipLoading">
-            <BeatLoader color={'#A9B2BD'} loading={isLoading} size={15} />
-          </div>
-        ) : isError || !versions.length ? (
-          <p className="tooltipErrorMsg">Failed to load the changelog</p>
-        ) : (
-          versionsMemo
-        )}
-      </ReactTooltip>
+      {createPortal(
+        <ReactTooltip
+          id={tooltipId}
+          event="click"
+          scrollHide={false}
+          afterShow={() => {
+            setTooltipShown(true)
+          }}
+          place="bottom"
+          className="changelogTooltip scrollable"
+          globalEventOff="click">
+          {isLoading ? (
+            <div className="tooltipLoading">
+              <BeatLoader color={'#A9B2BD'} loading={isLoading} size={15} />
+            </div>
+          ) : isError || !versions.length ? (
+            <p className="tooltipErrorMsg">Failed to load the changelog</p>
+          ) : (
+            versionsMemo
+          )}
+        </ReactTooltip>,
+        document.body
+      )}
+
       <button
         aria-label="Open changelog"
         className={'changelogButton' + (!isChangelogRead() ? ' active' : '')}