chore: Minor fix

app/javascript/dashboard/components-next/HelpCenter/Pages/CategoryPage/CategoryForm.vue

@@ -202,7 +202,7 @@ defineExpose({ state, isSubmitDisabled });
                 size="sm"
                 type="button"
                 :icon="!state.icon ? 'i-lucide-smile-plus' : ''"
-                class="!h-[2.4rem] !w-[2.375rem] absolute top-[1.94rem] !outline-none !rounded-[0.438rem] border-0 ltr:left-px rtl:right-px ltr:!rounded-r-none rtl:!rounded-l-none"
+                class="!h-[2.39rem] !w-[2.375rem] absolute top-px !outline-none !rounded-[0.438rem] border-0 ltr:left-px rtl:right-px ltr:!rounded-r-none rtl:!rounded-l-none"
                 @click="isEmojiPickerOpen = !isEmojiPickerOpen"
               />
               <EmojiInput

app/javascript/dashboard/components-next/NewConversation/components/ContentTemplateSelector.vue

@@ -82,12 +82,12 @@ const handleSendMessage = template => {
           :placeholder="
             t('COMPOSE_NEW_CONVERSATION.FORM.TWILIO_OPTIONS.SEARCH_PLACEHOLDER')
           "
-          custom-input-class="ltr:pl-10 rtl:pr-10"
+          class="ltr:!pl-8 rtl:!pr-8"
         >
           <template #prefix>
             <Icon
               icon="i-lucide-search"
-              class="absolute top-2 size-3.5 ltr:left-3 rtl:right-3"
+              class="absolute top-3 size-3.5 ltr:left-3 rtl:right-3"
             />
           </template>
         </Input>

app/javascript/dashboard/components-next/NewConversation/components/WhatsAppOptions.vue

@@ -4,6 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { useMapGetter } from 'dashboard/composables/store';
 
 import Icon from 'dashboard/components-next/icon/Icon.vue';
+import Input from 'dashboard/components-next/input/Input.vue';
 import Button from 'dashboard/components-next/button/Button.vue';
 import WhatsappTemplate from './WhatsappTemplate.vue';
 
@@ -77,11 +78,7 @@ const handleSendMessage = template => {
       class="absolute top-full mt-1.5 max-h-96 overflow-y-auto ltr:left-0 rtl:right-0 flex flex-col gap-2 p-4 items-center w-[21.875rem] h-auto bg-n-solid-2 border border-n-strong shadow-sm rounded-lg"
     >
       <div class="relative w-full">
-        <Icon
-          icon="i-lucide-search"
-          class="absolute size-3.5 top-2 ltr:left-3 rtl:right-3"
-        />
-        <input
+        <Input
           v-model="searchQuery"
           type="search"
           :placeholder="
@@ -89,8 +86,15 @@ const handleSendMessage = template => {
               'COMPOSE_NEW_CONVERSATION.FORM.WHATSAPP_OPTIONS.SEARCH_PLACEHOLDER'
             )
           "
-          class="w-full h-8 py-2 ltr:pl-10 rtl:pr-10 ltr:pr-2 rtl:pl-2 text-sm reset-base outline-none border-none rounded-lg bg-n-alpha-black2 dark:bg-n-solid-1 text-n-slate-12"
-        />
+          class="ltr:!pl-8 rtl:!pr-8"
+        >
+          <template #prefix>
+            <Icon
+              icon="i-lucide-search"
+              class="absolute top-3 size-3.5 ltr:left-3 rtl:right-3"
+            />
+          </template>
+        </Input>
       </div>
       <div
         v-for="template in filteredTemplates"

app/javascript/dashboard/components-next/input/Input.vue

@@ -22,8 +22,8 @@ const props = defineProps({
     default: 'info',
     validator: value => !value || ['info', 'error', 'success'].includes(value),
   },
-  min: { type: String, default: '' },
-  max: { type: String, default: '' },
+  min: { type: [String, Number], default: '' },
+  max: { type: [String, Number], default: '' },
   autofocus: { type: Boolean, default: false },
 });
 
@@ -128,7 +128,7 @@ onMounted(() => {
 </script>
 
 <template>
-  <div class="relative flex flex-col min-w-0 gap-1">
+  <div class="relative flex flex-col min-w-0 gap-1 w-full">
     <label
       v-if="label"
       :for="uniqueId"
@@ -136,9 +136,9 @@ onMounted(() => {
     >
       {{ label }}
     </label>
-    <!-- Added prefix slot to allow adding icons to the input -->
-    <slot name="prefix" />
-    <div class="relative">
+    <div class="relative flex min-w-0 items-center">
+      <!-- Added prefix slot to allow adding icons to the input -->
+      <slot name="prefix" />
       <input
         :id="uniqueId"
         ref="inputRef"

app/javascript/dashboard/components-next/phonenumberinput/PhoneNumberInput.vue

@@ -163,7 +163,7 @@ watch(
   <div>
     <div
       v-on-clickaway="() => closeCountryDropdown()"
-      class="relative flex items-center h-8 transition-all duration-500 ease-in-out outline outline-1 outline-offset-[-1px] rounded-lg bg-n-alpha-black2"
+      class="relative flex items-center h-8 transition-all duration-500 ease-in-out outline outline-1 outline-offset-[-1px] w-full rounded-lg bg-n-alpha-black2"
       :class="[inputBorderClass, { 'cursor-not-allowed opacity-50': disabled }]"
     >
       <Input
@@ -171,8 +171,7 @@ watch(
         type="tel"
         :placeholder="placeholder"
         :disabled="disabled"
-        custom-input-class="!border-0 !outline-none h-8 !py-0.5 !bg-transparent ltr:!pl-1 rtl:!pr-1"
-        class="w-full !flex-row"
+        class="!border-0 !outline-none h-8 !py-0.5 !bg-transparent ltr:!pl-1 rtl:!pr-1"
       >
         <template #prefix>
           <div class="flex items-center flex-shrink-0">
@@ -186,7 +185,7 @@ watch(
               trailing-icon
               :disabled="disabled"
               type="button"
-              class="!h-[1.875rem] top-1 ltr:ml-px rtl:mr-px !px-2 outline-0 !outline-none !rounded-lg border-0 ltr:!rounded-r-none rtl:!rounded-l-none"
+              class="!h-[1.875rem] top-1 ltr:ml-px rtl:mr-px !px-2 outline-0 !outline-none !rounded-[7px] border-0 ltr:!rounded-r-none rtl:!rounded-l-none"
               @click="toggleCountryDropdown"
             >
               <span