fix(Sponsors): remove nested wrappers and fix dark mode white flash

Author: mr-baraiya

src/components/Sponsors/Sponsors.jsx

@@ -9,17 +9,25 @@ import Link from "../Link/Link.jsx";
 
 const Sponsors = () => (
   <div className="absolute h-full w-[250px] ml-[-250px] mr-2.5">
-    <div className="sticky hidden xl:flex flex-wrap justify-center items-start border-r-2 border-gray-200 my-6 px-6 pb-12 overflow-hidden bg-gray-100 dark:bg-gray-900 transition-colors duration-200 top-24">
+    <div
+      className="
+        sticky top-24 hidden xl:flex flex-col items-center
+        border-r-2 border-gray-200 dark:border-gray-700
+        my-6 px-6 pb-12
+        bg-white dark:bg-gray-900
+        transition-colors duration-200
+      "
+    >
       {/* AG Grid */}
-      <div className="sticky hidden xl:flex flex-wrap justify-center items-start border-r-2 border-gray-200 dark:border-gray-700 my-6 px-6 pb-12 overflow-hidden bg-white dark:bg-gray-900 top-24">
+      <div className="my-6 text-center">
         <Link to="https://www.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship">
           {/* Light mode */}
           <img
             src={AGLogo}
             alt="ag grid"
             width={220}
             loading="lazy"
-            className="block dark:hidden"
+            className="block dark:hidden mx-auto"
           />
 
           {/* Dark mode */}
@@ -28,21 +36,21 @@ const Sponsors = () => (
             alt="ag grid dark"
             width={220}
             loading="lazy"
-            className="hidden dark:block"
+            className="hidden dark:block mx-auto"
           />
         </Link>
       </div>
 
       {/* AG Charts */}
-      <div className="sticky hidden xl:flex flex-wrap justify-center items-start border-r-2 border-gray-200 dark:border-gray-700 my-6 px-6 pb-12 overflow-hidden bg-white dark:bg-gray-900 top-24">
+      <div className="my-6 text-center">
         <Link to="https://charts.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship">
           {/* Light mode */}
           <img
             src={AGChartsLogo}
             alt="ag charts"
             width={220}
             loading="lazy"
-            className="block dark:hidden"
+            className="block dark:hidden mx-auto"
           />
 
           {/* Dark mode */}
@@ -51,15 +59,15 @@ const Sponsors = () => (
             alt="ag charts dark"
             width={220}
             loading="lazy"
-            className="hidden dark:block"
+            className="hidden dark:block mx-auto"
           />
         </Link>
       </div>
 
       {/* Webpack Sponsor */}
-      <div className="sticky hidden xl:flex flex-wrap justify-center items-start border-r-2 border-gray-200 dark:border-gray-700 my-6 px-6 pb-12 overflow-hidden bg-white dark:bg-gray-900 top-24">
+      <div className="my-6 text-center">
         <Link to="https://www.ag-grid.com/?utm_source=webpack&utm_medium=banner&utm_campaign=sponsorship">
-          <div className="text-2xl text-gray-700 dark:text-gray-300 my-4 text-center">
+          <div className="text-2xl text-gray-700 dark:text-gray-300 my-4">
             Datagrid and Charting for Enterprise Applications
           </div>
 
@@ -73,7 +81,7 @@ const Sponsors = () => (
             />
           </div>
 
-          <div className="italic text-xl text-gray-700 dark:text-gray-300 my-4 text-center">
+          <div className="italic text-xl text-gray-700 dark:text-gray-300 my-4">
             Proud to partner with webpack
           </div>
         </Link>