Add nextra-scrollbar to cards lists (main) (#1965)

Author: hasparus

packages/components/src/components/explore-main-product-cards.tsx

@@ -35,7 +35,7 @@ export function ExploreMainProductCards({
           <ArrowIcon />
         </TextLink>
       </div>
-      <ul className="-mx-12 -my-2 flex shrink-0 grow gap-[22px] overflow-auto px-12 py-2 [@media(max-width:1490px)]:w-full [@media(min-width:1490px)]:overflow-visible [&>:nth-child(n+4)]:[@media(min-width:1490px)]:hidden">
+      <ul className="nextra-scrollbar -mx-12 -my-2 flex shrink-0 grow gap-[22px] overflow-auto px-12 py-2 [@media(max-width:1490px)]:w-full [@media(min-width:1490px)]:overflow-visible [&>:nth-child(n+4)]:[@media(min-width:1490px)]:hidden">
         {FOUR_MAIN_PRODUCTS.map(product => (
           <MainProductCard key={product.name} as="li" product={product} />
         ))}

packages/components/src/components/tools-and-libraries-cards/index.tsx

@@ -25,13 +25,13 @@ export function ToolsAndLibrariesCards({
         Discover the complete ecosystem of tools and libraries
       </Heading>
       <p className="text-green-800">Complete GraphQL Federation Stack</p>
-      <ul className="-mx-12 -my-2 flex grid-cols-2 gap-[22px] overflow-auto px-12 py-2 lg:grid xl:grid-cols-4">
+      <ul className="nextra-scrollbar -mx-12 -my-2 flex grid-cols-2 gap-[22px] overflow-auto px-12 py-2 lg:grid xl:grid-cols-4">
         {FOUR_MAIN_PRODUCTS.map(product => (
           <MainProductCard key={product.name} as="li" product={product} />
         ))}
       </ul>
       <p className="text-green-800">Our libraries to support all your GraphQL needs</p>
-      <ul className="-mx-12 -my-2 flex h-max grid-cols-6 gap-[22px] overflow-x-auto overflow-y-hidden px-12 py-2 max-sm:-mx-8 max-sm:px-8 sm:grid sm:grid-cols-2 lg:grid-cols-3">
+      <ul className="nextra-scrollbar -mx-12 -my-2 flex h-max grid-cols-6 gap-[22px] overflow-x-auto overflow-y-hidden px-12 py-2 max-sm:-mx-8 max-sm:px-8 sm:grid sm:grid-cols-2 lg:grid-cols-3">
         {SIX_HIGHLIGHTED_PRODUCTS.map(product => (
           <AncillaryProductCard key={product.name} as="li" product={product} />
         ))}