Fixing grid issues.

src/components/products/Grid.jsx

@@ -1,4 +1,3 @@
-import clsx from 'clsx'
 import { LogoWithName } from './Logo'
 import { products as allProducts } from './index'
 import Link from 'next/link'
@@ -7,7 +6,7 @@ export function Grid({
   onClick,
   withoutFallback,
   menuItem,
-  numCols = 3,
+  numCols = 'grid-cols-3',
   ...props
 }) {
   console.log('menuItem', menuItem)
@@ -15,9 +14,7 @@ export function Grid({
     (product) => menuItem === product.navigationMenuCatergory
   )
 
-  const className = `relative grid-flow-row grid-cols-${numCols} grid-rows-${Math.ceil(
-    products.length / numCols
-  )}`
+  let className = `relative grid ${numCols} gap-3`
   console.log(className)
 
   return (
@@ -26,7 +23,7 @@ export function Grid({
         <li key={product.path}>
           <Link
             href={`/${product.path}`}
-            className="block rounded-lg p-3 hover:bg-slate-50 hover:dark:bg-slate-700"
+            className="block content-start rounded-lg p-3 hover:bg-slate-50 hover:dark:bg-slate-700"
             onClick={onClick}
           >
             <LogoWithName product={product}></LogoWithName>

src/components/products/Logo.jsx

@@ -1,6 +1,6 @@
 export function LogoWithName({ product, ...props }) {
   return (
-    <div className="flex items-center" {...props}>
+    <div className="flex" {...props}>
       <Logo product={product} className="h-8 w-8 shrink-0" />
       <div className="ml-4 flex flex-1 flex-col justify-center text-left">
         <div className="text-sm font-medium leading-none text-slate-800 dark:text-white">

src/components/products/MobileAppGrid.jsx

@@ -21,29 +21,29 @@ export function MobileAppGrid({
       <li key={hub.path}>
         <Link
           href={`/${hub.path}`}
-          className="block rounded-lg p-3 hover:bg-slate-50 hover:dark:bg-slate-700 sticky"
+          className="sticky block rounded-lg p-3 hover:bg-slate-50 hover:dark:bg-slate-700"
           onClick={onClick}
         >
           <LogoWithName product={hub}></LogoWithName>
         </Link>
         <hr />
       </li>
-      
-    <div className='overflow-y-auto'>
-      {products
-        .filter((product) => product.name != 'Metaplex')
-        .map((product) => (
-          <li key={product.path}>
-            <Link
-              href={`/${product.path}`}
-              className="block rounded-lg p-3 hover:bg-slate-50 hover:dark:bg-slate-700"
-              onClick={onClick}
-            >
-              <LogoWithName product={product}></LogoWithName>
-            </Link>
-          </li>
-        ))}
-        </div>
+
+      <div className="overflow-y-auto">
+        {products
+          .filter((product) => product.name != 'Metaplex')
+          .map((product) => (
+            <li key={product.path}>
+              <Link
+                href={`/${product.path}`}
+                className="block rounded-lg p-3 hover:bg-slate-50 hover:dark:bg-slate-700"
+                onClick={onClick}
+              >
+                <LogoWithName product={product}></LogoWithName>
+              </Link>
+            </li>
+          ))}
+      </div>
     </ul>
   )
 }
@@ -51,10 +51,7 @@ export function MobileAppGrid({
 export function MarkdocGrid() {
   return (
     <div className="not-prose">
-      <Grid
-        className="relative md:grid-flow-col md:grid-cols-4 md:grid-rows-4"
-        withoutFallback
-      />
+      <Grid withoutFallback />
     </div>
   )
 }

src/components/products/SwitcherPopover.jsx

@@ -18,7 +18,11 @@ export function SwitcherPopover({ children, menuItem, ...props }) {
         {({ close }) => (
           <div className="fixed left-0 w-full">
             <div className="m-auto w-full max-w-[600px]  overflow-hidden  rounded-lg bg-white p-4 shadow-xl ring-1 ring-black ring-opacity-5 dark:border dark:border-slate-600 dark:bg-neutral-900">
-              <Grid onClick={close} menuItem={menuItem} numCols={2} />
+              <Grid
+                onClick={close}
+                menuItem={menuItem}
+                numCols={'grid-cols-2'}
+              />
             </div>
           </div>
         )}