From df121cc78328be003aef7784811e086c61349afb Mon Sep 17 00:00:00 2001
From: Tariq Jamal A <tariqjamal4267324@gmail.com>
Date: Mon, 19 May 2025 01:53:36 +0530
Subject: [PATCH] refactor: resolve related item scrolling issue in related
 products

---
 components/products/RelatedProductCards.jsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/products/RelatedProductCards.jsx b/components/products/RelatedProductCards.jsx
index c68b7ae..fa28756 100644
--- a/components/products/RelatedProductCards.jsx
+++ b/components/products/RelatedProductCards.jsx
@@ -30,12 +30,12 @@ const RelatedProductCards = ({ productId }) => {
           You may also like
         </h1>
       </div>
-      <div className="overflow-x-auto  hide-navbar gap-5 flex items-center justify-center">
+      <div className="overflow-x-auto hide-navbar flex items-center justify-start px-4 pb-4 -mx-4 snap-x">
         {relatedProducts.map((product) => (
           <Link href={`/products/${product.id}`} key={product.id}>
             <div
               key={product.id}
-              className="relative bg-[#EDE8E0]  overflow-hidden sm:h-[350px] sm:w-[300px] "
+              className="relative bg-[#EDE8E0] overflow-hidden sm:h-[350px] sm:w-[300px] flex-shrink-0 mx-3 snap-center"
             >
               <div className="absolute top-0 left-0 bg-[#C19A5B] text-white py-1 px-3 rounded-br-lg z-10">
                 Exclusive
@@ -49,8 +49,8 @@ const RelatedProductCards = ({ productId }) => {
                   className="w-full h-full object-cover hover:scale-125 transition-transform ease-in-out duration-300"
                 />
               </div>
-              <div className="p-4 ">
-                <h3 className="text-center text-[1rem] uppercase  text-gray-800">
+              <div className="p-4">
+                <h3 className="text-center text-[1rem] uppercase text-gray-800">
                   {product.product_name}
                 </h3>
               </div>