Merge pull request #248 from medyo/develop

New version #minor

Author: medyo

package.json

@@ -20,7 +20,7 @@
     "react": "^19.1.0",
     "react-contexify": "^5.0.0",
     "react-dom": "^19.1.0",
-    "react-easy-sort": "^1.5.1",
+    "react-easy-sort": "^1.6.0",
     "react-error-boundary": "^3.1.4",
     "react-icons": "^5.2.1",
     "react-infinite-scroll-hook": "^6.0.0",

src/components/Layout/DesktopCards.tsx

@@ -1,4 +1,4 @@
-import { useLayoutEffect, useRef } from 'react'
+import { useEffect, useRef } from 'react'
 import SortableList, { SortableItem } from 'react-easy-sort'
 import { SUPPORTED_CARDS } from 'src/config/supportedCards'
 import { CustomRssCard } from 'src/features/cards'
@@ -27,7 +27,7 @@ export const DesktopCards = ({
     }
   }
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     scrollHolderRef.current = document.querySelector('.Cards')
   }, [])
 
@@ -36,10 +36,9 @@ export const DesktopCards = ({
       as="div"
       onSortEnd={onSortEnd}
       lockAxis="x"
-      customHolderRef={scrollHolderRef}
       className="Cards HorizontalScroll"
       draggedItemClassName="draggedBlock">
-      {cards
+      {[...cards]
         .sort((a, b) => a.id - b.id)
         .map((card, index) => {
           const constantCard = AVAILABLE_CARDS.find((c) => c.value === card.name)
@@ -52,11 +51,7 @@ export const DesktopCards = ({
           return (
             <SortableItem key={card.name}>
               <div>
-                <Component
-                  key={card.name}
-                  meta={constantCard}
-                  withAds={index === adsConfig.columnPosition}
-                />
+                <Component meta={constantCard} withAds={index === adsConfig.columnPosition} />
               </div>
             </SortableItem>
           )

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' : '')}

yarn.lock

@@ -5760,7 +5760,7 @@ react-dom@^19.1.0:
   dependencies:
     scheduler "^0.26.0"
 
-react-easy-sort@^1.5.1:
+react-easy-sort@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/react-easy-sort/-/react-easy-sort-1.6.0.tgz#b40cce827913f0640c1b2e5438dd4d007e26db32"
   integrity sha512-zd9Nn90wVlZPEwJrpqElN87sf9GZnFR1StfjgNQVbSpR5QTSzCHjEYK6REuwq49Ip+76KOMSln9tg/ST2KLelg==