From c04f659b49230bbe48329c28e62f6867325b997c Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Thu, 13 Mar 2025 01:38:26 +0330
Subject: [PATCH] responsived

---
 frontend/pages/products.vue | 38 +++++++++++++++++++++----------------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/frontend/pages/products.vue b/frontend/pages/products.vue
index 3dd1d62..ae88b36 100644
--- a/frontend/pages/products.vue
+++ b/frontend/pages/products.vue
@@ -59,33 +59,36 @@ watch(
 
 <template>
     <div class="w-full container flex flex-col">
-        <div class="w-full flex justify-end items-end py-[5rem]">
+        <div
+            class="w-full flex flex-col lg:flex-row justify-end items-end py-[3.5rem] lg:py-[5rem] gap-10 lg:gap-5"
+        >
             <div
-                class="flex flex-col items-start gap-[1.5rem] text-black w-full"
+                class="flex flex-col items-center lg:items-start gap-[1rem] lg:gap-[1.5rem] text-black w-full"
             >
                 <div class="flex-center gap-[.75rem]">
-                    <span>خانه</span>
-                    <span>/</span>
-                    <span>محصولات</span>
-                    <span>/</span>
-                    <span>همه</span>
+                    <span class="text-xs lg:text-sm">خانه</span>
+                    <span class="text-xs lg:text-sm">/</span>
+                    <span class="text-xs lg:text-sm">محصولات</span>
+                    <span class="text-xs lg:text-sm">/</span>
+                    <span class="text-xs lg:text-sm">همه</span>
                 </div>
-                <h1 class="typo-h-3">لیست محصولات</h1>
+                <h1 class="typo-h-5 lg:typo-h-4">لیست محصولات</h1>
             </div>
 
-            <div class="w-full flex items-center justify-end gap-4">
+            <div
+                class="w-full flex items-center justify-between lg:justify-end gap-4"
+            >
                 <Input
                     placeholder="جست و جو محصول ..."
                     v-model="search"
                     variant="outlined"
-                    class="rounded-full w-8/12"
+                    class="rounded-full w-full lg:w-8/12"
                 >
                     <template #endItem>
                         <div class="flex items-center gap-1">
                             <Icon
-                                class="translate-y-[-1px]"
+                                class="translate-y-[-1px] text-[20px] lg:text-[24px]"
                                 name="ci:search"
-                                size="24"
                             />
                         </div>
                     </template>
@@ -94,7 +97,7 @@ watch(
                     <FilterButton />
                     <template #fallback>
                         <Skeleton
-                            class="!w-[10.35rem] !h-[3.35rem] !rounded-full"
+                            class="!size-11 lg:!w-[10.35rem] lg:!h-[3.35rem] shrink-0 !rounded-full"
                         />
                     </template>
                 </Suspense>
@@ -102,19 +105,22 @@ watch(
         </div>
         <ul
             v-if="productsIsLoading"
-            class="w-full grid grid-cols-3 gap-[1.5rem]"
+            class="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[1.5rem]"
         >
             <Skeleton
                 v-for="i in 9"
                 :key="i"
-                class="w-full !h-[31.25rem] !rounded-2xl"
+                class="w-full !h-[25rem] lg:!h-[22.5rem] !rounded-2xl"
             />
         </ul>
         <div v-else class="w-full h-max">
             <div v-if="!products?.length" class="flex flex-grow w-full">
                 <Placeholder title="محصولی یافت نشد :(" icon="bi:search" />
             </div>
-            <ul v-else class="w-full grid grid-cols-3 gap-[1.5rem]">
+            <ul
+                v-else
+                class="w-full grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-[1.5rem]"
+            >
                 <li v-for="(product, index) in products" :key="index">
                     <ProductCard
                         :id="product.id"