From 3374e646a3c0254df9b38fd2cee6dd13e0f39c3e Mon Sep 17 00:00:00 2001
From: Balazs Bajorics <2226774+balazsbajorics@users.noreply.github.com>
Date: Mon, 6 May 2024 17:35:28 +0200
Subject: [PATCH] fixing up the featured products

---
 app/components/Components.jsx          |  1 -
 app/components/RecommendedProducts.jsx | 16 ++++++++++------
 2 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/app/components/Components.jsx b/app/components/Components.jsx
index fd8f87b..f0b54d9 100644
--- a/app/components/Components.jsx
+++ b/app/components/Components.jsx
@@ -580,7 +580,6 @@ export const ProductCard = ({
   return (
     <Link
       key={id}
-      className='recommended-product'
       to={`/products/${handle}`}
       style={{
         textDecoration: 'none',
diff --git a/app/components/RecommendedProducts.jsx b/app/components/RecommendedProducts.jsx
index e8ba6a4..46f195f 100644
--- a/app/components/RecommendedProducts.jsx
+++ b/app/components/RecommendedProducts.jsx
@@ -1,5 +1,10 @@
 import { Suspense } from 'react'
-import { ProductCard, TypographyTitle } from './Components'
+import {
+  Column,
+  ProductCard,
+  Row,
+  TypographyTitle,
+} from './Components'
 import { Await, useLoaderData } from '@remix-run/react'
 import { RecommendedProductsGrid } from './Layout'
 
@@ -11,11 +16,11 @@ import { RecommendedProductsGrid } from './Layout'
 export function RecommendedProducts() {
   const { recommendedProducts } = useLoaderData()
   return (
-    <div className='recommended-products'>
+    <Column centerH>
       <TypographyTitle level={2}>
         Featured Products
       </TypographyTitle>
-      <RecommendedProductsGrid>
+      <Row scrollable>
         {recommendedProducts.map((product, i) => (
           <ProductCard
             key={product.id}
@@ -27,8 +32,7 @@ export function RecommendedProducts() {
             backgroundColorIndex={i}
           />
         ))}
-      </RecommendedProductsGrid>
-      <br />
-    </div>
+      </Row>
+    </Column>
   )
 }