fix width classes

JhumanJ · Oct 3, 2024 · 5fde9f6 · 5fde9f6
1 parent faf0a24
commit 5fde9f6
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 1 deletion.
diff --git a/client/components/forms/PhoneInput.vue b/client/components/forms/PhoneInput.vue
@@ -12,7 +12,7 @@
     >
       <v-select
         v-model="selectedCountryCode"
-        class="w-[130px]"
+        :class="theme.PhoneInput.countrySelectWidth"
         dropdown-class="max-w-[300px]"
         input-class="rounded-r-none"
         :data="countries"

diff --git a/client/lib/forms/themes/form-themes.js b/client/lib/forms/themes/form-themes.js
@@ -74,6 +74,11 @@ export const themes = {
       }
     },
     PhoneInput: {
+      countrySelectWidth: {
+        sm: 'w-[100px]',
+        md: 'w-[120px]',
+        lg: 'w-[120px]'
+      },
       flag: {
         sm: '!-mt-[14px]',
         md: '!-mt-[9px] rounded',
@@ -220,6 +225,11 @@ export const themes = {
       }
     },
     PhoneInput: {
+      countrySelectWidth: {
+        sm: 'w-[100px]',
+        md: 'w-[120px]',
+        lg: 'w-[120px]'
+      },
       flag: {
         sm: '!-mt-[14px]',
         md: '!-mt-[9px] rounded',
@@ -360,6 +370,11 @@ export const themes = {
       }
     },
     PhoneInput: {
+      countrySelectWidth: {
+        sm: 'w-[100px]',
+        md: 'w-[120px]',
+        lg: 'w-[120px]'
+      },
       flag: {
         sm: '!-mt-[14px]',
         md: '!-mt-[9px] rounded',