From b199444fef864dbbe14420c3922378741267dda3 Mon Sep 17 00:00:00 2001
From: Mamalizz <mohammad.hosein.ghorbani82@gmail.com>
Date: Mon, 12 May 2025 18:53:45 +0330
Subject: [PATCH] responsived combo box

---
 frontend/components/global/ComboBox.vue | 52 +++++++++++++++++--------
 1 file changed, 35 insertions(+), 17 deletions(-)

diff --git a/frontend/components/global/ComboBox.vue b/frontend/components/global/ComboBox.vue
index 70535bd..42a3718 100644
--- a/frontend/components/global/ComboBox.vue
+++ b/frontend/components/global/ComboBox.vue
@@ -47,9 +47,7 @@ watch(
 watch(
     () => modelValue.value,
     (newValue) => {
-        const target = options.value
-            .flatMap((option) => option.children)
-            .find((child) => child.id == newValue);
+        const target = options.value.flatMap((option) => option.children).find((child) => child.id == newValue);
 
         value.value = target || undefined;
     },
@@ -58,9 +56,13 @@ watch(
 </script>
 
 <template>
-    <ComboboxRoot class="relative" dir="rtl" v-model="value">
+    <ComboboxRoot
+        class="relative"
+        dir="rtl"
+        v-model="value"
+    >
         <ComboboxAnchor
-            class="w-full inline-flex items-center justify-between rounded-xl border-[1.5px] border-slate-200 focus:border-slate-800 px-[1rem] text-sm leading-none py-3.5 gap-[5px] bg-slate-50 text-black hover:border-black transition-all data-[placeholder]:text-black/80 typo-label-sm outline-none"
+            class="w-full inline-flex items-center justify-between rounded-xl border-[1.5px] border-slate-200 focus:border-slate-800 leading-none px-4 py-2.5 lg:py-3.5 gap-[5px] bg-slate-50 text-black hover:border-black transition-all data-[placeholder]:text-black/80 text-xs lg:text-sm placeholder-slate-400 placeholder:text-xs lg:placeholder:text-sm placeholder:font-normal outline-none"
         >
             <ComboboxInput
                 :display-value="(v) => (!!v ? v.name : '')"
@@ -68,29 +70,39 @@ watch(
                 :placeholder="placeholder"
             />
             <ComboboxTrigger class="cursor-pointer">
-                <Icon name="ci:chevron-down" class="size-5" />
+                <Icon
+                    name="ci:chevron-down"
+                    class="size-5"
+                />
             </ComboboxTrigger>
         </ComboboxAnchor>
 
         <ComboboxContent
-            class="absolute z-10 w-full mt-4 bg-slate-50 overflow-hidden rounded-xl shadow-sm border border-slate-200 will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=bottom]:animate-slideUpAndFade"
+            class="absolute z-10 w-full max-h-[25rem] mt-4 bg-slate-50 overflow-hidden rounded-xl shadow-sm border border-slate-200 will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=bottom]:animate-slideUpAndFade"
         >
             <ComboboxViewport class="p-[1rem]">
-                <ComboboxEmpty
-                    class="text-mauve8 text-xs font-medium text-center py-5"
-                />
+                <ComboboxEmpty class="placeholder-slate-400 text-xs font-medium text-center py-5" />
 
-                <template v-for="(group, index) in options" :key="group.name">
+                <template
+                    v-for="(group, index) in options"
+                    :key="group.name"
+                >
                     <ComboboxGroup>
-                        <ComboboxSeparator v-if="index !== 0" class="h-6" />
+                        <ComboboxSeparator
+                            v-if="index !== 0"
+                            class="h-6"
+                        />
 
                         <ComboboxLabel
-                            class="flex items-center justify-between px-[1.2rem] w-full text-md text-black bg-slate-200/50 leading-[25px] py-3 rounded-lg"
+                            class="flex items-center justify-between px-[1.2rem] w-full max-lg:text-sm text-black bg-slate-200/50 leading-[25px] py-2 lg:py-3 rounded-lg"
                         >
                             <span>
                                 {{ group.name }}
                             </span>
-                            <Icon name="ci:delivery-boxes" size="18px" />
+                            <Icon
+                                name="ci:delivery-boxes"
+                                class="text-lg"
+                            />
                         </ComboboxLabel>
 
                         <ComboboxItem
@@ -102,10 +114,16 @@ watch(
                             <ComboboxItemIndicator
                                 class="absolute left-3 w-[25px] inline-flex items-center justify-center"
                             >
-                                <Icon name="ci:checkmark" size="18" />
+                                <Icon
+                                    name="ci:checkmark"
+                                    size="18"
+                                />
                             </ComboboxItemIndicator>
-                            <div class="flex items-center gap-2">
-                                <Icon name="ci:minus" class="opacity-50" />
+                            <div class="flex items-center gap-2 max-lg:text-xs">
+                                <Icon
+                                    name="ci:minus"
+                                    class="opacity-50"
+                                />
                                 <span>
                                     {{ option.name }}
                                 </span>