From 23f169623658b5d4e84fa618d6f36a39621472ec Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Wed, 16 Apr 2025 22:58:24 +0330
Subject: [PATCH] responsived

---
 frontend/pages/profile/tickets/index.vue | 40 ++++++++++++++++--------
 1 file changed, 27 insertions(+), 13 deletions(-)

diff --git a/frontend/pages/profile/tickets/index.vue b/frontend/pages/profile/tickets/index.vue
index 608b8f0..c06c5f0 100644
--- a/frontend/pages/profile/tickets/index.vue
+++ b/frontend/pages/profile/tickets/index.vue
@@ -99,10 +99,16 @@ const clearFilters = () => {
         <ProfilePageTitle title="تیکت های شما" icon="bi:ticket" />
 
         <div class="w-full flex flex-col gap-5">
-            <div class="w-full flex items-center justify-between px-5">
-                <div class="flex items-center justify-start gap-8">
-                    <div class="flex items-center justify-start gap-3">
-                        <span class="text-sm">ترتیب بر اساس</span>
+            <div
+                class="w-full flex flex-col-reverse lg:flex-row items-center justify-between lg:px-5 gap-5"
+            >
+                <div
+                    class="max-lg:w-full flex items-center justify-start gap-8"
+                >
+                    <div
+                        class="flex flex-col lg:flex-row items-start lg:items-center justify-start gap-3 max-lg:w-full"
+                    >
+                        <span class="text-xs lg:text-sm">ترتیب بر اساس</span>
                         <Select
                             v-model="params.sort!"
                             triggerRootClass="!py-2.5"
@@ -113,7 +119,7 @@ const clearFilters = () => {
                                     <SelectItem
                                         v-for="(category, index) in sortFilters"
                                         :key="index"
-                                        class="text-xs leading-none w-full rounded-sm py-5 flex items-center justify-between h-[25px] pr-[12px] relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-slate-300 data-[highlighted]:text-black"
+                                        class="text-xs leading-none w-full rounded-sm py-4 lg:py-5 flex items-center justify-between h-[25px] pr-[12px] relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-slate-300 data-[highlighted]:text-black"
                                         :value="category.value"
                                     >
                                         <SelectItemIndicator
@@ -122,7 +128,7 @@ const clearFilters = () => {
                                             <Icon name="bi:check" size="20" />
                                         </SelectItemIndicator>
                                         <SelectItemText
-                                            class="text-end font-iran-yekan-x text-sm"
+                                            class="text-end font-iran-yekan-x lg:text-sm"
                                         >
                                             {{ category.title }}
                                         </SelectItemText>
@@ -131,8 +137,10 @@ const clearFilters = () => {
                             </template>
                         </Select>
                     </div>
-                    <div class="flex items-center justify-start gap-3">
-                        <span class="text-sm">وضعیت</span>
+                    <div
+                        class="flex flex-col lg:flex-row items-start lg:items-center justify-start gap-3 max-lg:w-full"
+                    >
+                        <span class="text-xs lg:text-sm">وضعیت</span>
                         <Select
                             v-model="params.status!"
                             triggerRootClass="!py-2.5"
@@ -145,7 +153,7 @@ const clearFilters = () => {
                                             category, index
                                         ) in statusFilters"
                                         :key="index"
-                                        class="text-xs leading-none w-full rounded-sm py-5 flex items-center justify-between h-[25px] pr-[12px] relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-slate-300 data-[highlighted]:text-black"
+                                        class="text-xs leading-none w-full rounded-sm py-4 lg:py-5 flex items-center justify-between h-[25px] pr-[12px] relative select-none data-[disabled]:pointer-events-none data-[highlighted]:outline-none data-[highlighted]:bg-slate-300 data-[highlighted]:text-black"
                                         :value="category.value"
                                     >
                                         <SelectItemIndicator
@@ -154,7 +162,7 @@ const clearFilters = () => {
                                             <Icon name="bi:check" size="20" />
                                         </SelectItemIndicator>
                                         <SelectItemText
-                                            class="text-end font-iran-yekan-x text-sm"
+                                            class="text-end font-iran-yekan-x text-xs lg:text-sm"
                                         >
                                             {{ category.title }}
                                         </SelectItemText>
@@ -165,7 +173,10 @@ const clearFilters = () => {
                     </div>
                 </div>
 
-                <div class="flex-center gap-4">
+                <div
+                    class="flex items-center lg:justify-center gap-4 max-lg:w-full"
+                    :class="hasFilters ? 'justify-between' : 'justify-end'"
+                >
                     <Button
                         v-if="hasFilters"
                         end-icon="bi:x"
@@ -208,7 +219,7 @@ const clearFilters = () => {
                                 ? 'w-1/2'
                                 : 'w-2/12'
                         "
-                        class="px-6 py-5 text-sm font-normal"
+                        class="px-6 py-5 text-xs lg:text-sm font-normal shrink-0 whitespace-pre"
                     >
                         {{ tableHead }}
                     </th>
@@ -227,7 +238,10 @@ const clearFilters = () => {
                 </template>
             </Table>
 
-            <div v-if="data && paginationData && data.count > 7" class="w-full flex-center py-10">
+            <div
+                v-if="data && paginationData && data.count > 7"
+                class="w-full flex-center py-10"
+            >
                 <Pagination :items="paginationData" :total="data?.count" />
             </div>
         </div>