changed some style

frontend/pages/category.vue

@@ -55,27 +55,34 @@ if (response.isError) {
 
 <template>
     <div class="container">
-        <div class="pt-20 pb-8 sm:py-20 flex gap-12 sm:gap-6 justify-between items-center max-sm:flex-col max-sm:items-start">
+        <div
-            <span class="typo-h-5 lg:typo-h-4 text-black">دسته بندی ها</span>
+            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 items-center gap-4 sm:gap-8 max-sm:w-full">
+        >
+            <div class="flex flex-col items-center lg:items-start w-full">
+                <h1 class="typo-h-5 lg:typo-h-4 text-black">دسته بندی ها</h1>
+            </div>
+
+            <div
+                class="w-full flex items-center justify-between lg:justify-end gap-4"
+            >
                 <Input
-                    class="max-w-[400px] w-full rounded-full h-[38px] lg:h-[50px]"
+                    placeholder="جست و جو محصول ..."
-                    variant="outlined"
-                    placeholder="جستجو..."
                     v-model="search"
+                    variant="outlined"
+                    class="!rounded-xl w-full lg:w-8/12"
                 >
                     <template #endItem>
                         <div class="flex items-center gap-1">
                             <Icon
-                                class="translate-y-[-1px] size-[18px] lg:size-[24px]"
+                                class="translate-y-[-1px] text-[20px] lg:text-[24px]"
                                 name="ci:search"
                             />
                         </div>
                     </template>
                 </Input>
-
                 <Select
-                    class="whitespace-nowrap max-sm:w-full"
+                    class="shrink-0 max-lg:w-[5rem] lg:w-[6.5rem] py-0.5"
+                    triggerRootClass="!rounded-xl whitespace-nowrap max-sm:w-full shrink-0 "
                     :options="mainCategoriesMenu"
                     variant="outlined"
                     placeholder="انتخاب کنید"
@@ -106,7 +113,10 @@ if (response.isError) {
                 <div
                     class="flex-col flex-grow py-32 sm:py-[12rem] gap-6 border-2 border-slate-200 border-dashed size-full rounded-100 flex-center"
                 >
-                    <Icon name="bi:search" class="**:fill-gray-500 size-[40px] sm:size-[50px]" />
+                    <Icon
+                        name="bi:search"
+                        class="**:fill-gray-500 size-[40px] sm:size-[50px]"
+                    />
                     <span class="text-lg text-gray-500">
                         دسته بندی یافت نشد :(
                     </span>