From 9f006b36ab4e4cb2913fca6029dca56403a797ef Mon Sep 17 00:00:00 2001
From: morteza-mortezai <mrtz.mrtzi.1989@gmail.com>
Date: Tue, 21 Jul 2026 11:20:07 +0330
Subject: [PATCH] ref product section

---
 src/pages/home/components/ServiceItem.tsx |  4 ++--
 src/pages/home/components/Services.tsx    | 10 +++++-----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/pages/home/components/ServiceItem.tsx b/src/pages/home/components/ServiceItem.tsx
index 5e1d6b2..2bda228 100644
--- a/src/pages/home/components/ServiceItem.tsx
+++ b/src/pages/home/components/ServiceItem.tsx
@@ -4,8 +4,8 @@ import { type FC } from 'react'
 
 const ServiceItem: FC<{ product: ProductType }> = ({ product }) => {
     return (
-        <div className='flex w-[88px] shrink-0 snap-start flex-col items-center gap-2 md:w-auto'>
-            <div className='size-16 overflow-hidden rounded-full border-[3px] border-primary bg-gray-200 md:size-20'>
+        <div className='flex w-[88px] shrink-0 snap-start flex-col items-center gap-2'>
+            <div className='size-20 overflow-hidden rounded-full border-[3px] border-primary bg-gray-200'>
                 {product.images?.[0] ? (
                     <PresignedImage
                         src={product.images[0]}
diff --git a/src/pages/home/components/Services.tsx b/src/pages/home/components/Services.tsx
index a0b7f3b..466252f 100644
--- a/src/pages/home/components/Services.tsx
+++ b/src/pages/home/components/Services.tsx
@@ -28,13 +28,13 @@ const CategoryTabsSkeleton: FC = () => (
 )
 
 const ServicesSkeleton: FC = () => (
-    <div className='flex gap-4 md:grid md:grid-cols-4 md:gap-6 lg:grid-cols-6 xl:grid-cols-8'>
+    <div className='flex w-max gap-4'>
         {Array.from({ length: SKELETON_COUNT }).map((_, index) => (
             <div
                 key={index}
-                className='flex w-[88px] shrink-0 flex-col items-center gap-2 md:w-auto'
+                className='flex w-[88px] shrink-0 flex-col items-center gap-2'
             >
-                <div className='size-16 animate-pulse rounded-full bg-gray-200 md:size-20' />
+                <div className='size-20 animate-pulse rounded-full bg-gray-200' />
                 <div className='h-8 w-full animate-pulse rounded bg-gray-100' />
             </div>
         ))}
@@ -98,7 +98,7 @@ const Services: FC = () => {
                     />
                 ) : null}
 
-                <div className='-mx-4 overflow-x-auto px-4 pb-1 md:mx-0 md:overflow-visible md:px-0'>
+                <div className='-mx-4 overflow-x-auto px-4 pb-1 md:mx-0 md:px-0'>
                     {isLoading ? (
                         <ServicesSkeleton />
                     ) : products.length === 0 ? (
@@ -106,7 +106,7 @@ const Services: FC = () => {
                             {t('home.noProducts')}
                         </p>
                     ) : (
-                        <div className='flex w-max snap-x snap-mandatory gap-4 md:grid md:w-full md:grid-cols-4 md:gap-6 md:snap-none lg:grid-cols-6 xl:grid-cols-8'>
+                        <div className='flex w-max snap-x snap-mandatory gap-4 md:gap-6'>
                             {products.map((item) => (
                                 <ServiceItem key={item.id} product={item} />
                             ))}