Fixes spacing issue in patient list phone number field and search inp…

…uts (#8185)

* fixes #8181

* show error only when out of focus

* Revert "show error only when out of focus"

This reverts commit 5a33cb7.

src/Components/Patient/ManagePatients.tsx

@@ -519,7 +519,7 @@ export const PatientManager = () => {
             </span>
           </div>
           <div className="flex flex-col items-start gap-4 md:flex-row">
-            <div className="bg-secondary-50 h-20 w-full min-w-20 rounded-lg border border-secondary-300 md:w-20">
+            <div className="h-20 w-full min-w-20 rounded-lg border border-secondary-300 bg-secondary-50 md:w-20">
               {patient?.last_consultation?.current_bed &&
               patient?.last_consultation?.discharge_date === null ? (
                 <div className="tooltip flex h-full flex-col items-center justify-center">
@@ -788,7 +788,6 @@ export const PatientManager = () => {
       name,
       value: qParams[name] || defaultValue,
       onChange: (e: FieldChangeEvent<T>) => updateQuery({ [e.name]: e.value }),
-      className: "grow w-full mb-2",
     };
   };
 
@@ -975,28 +974,31 @@ export const PatientManager = () => {
           </div>
         </div>
         <div className="col-span-3 w-full">
-          <div className="col-span-2 mt-2">
-            <div className="mt-1 md:flex md:gap-4">
+          <div className="mt-2">
+            <div className="mb-4 mt-1 md:flex md:gap-4">
               <SearchInput
                 label="Search by Patient"
                 placeholder="Enter patient name"
                 {...queryField("name")}
+                className="w-full grow"
               />
               <SearchInput
                 label="Search by IP/OP Number"
                 placeholder="Enter IP/OP Number"
                 secondary
                 {...queryField("patient_no")}
+                className="w-full grow"
               />
             </div>
-            <div className="md:flex md:gap-4">
+            <div className="mb-4 md:flex md:gap-4">
               <PhoneNumberFormField
                 label="Search by Primary Number"
                 {...queryField("phone_number", "+91")}
                 value={phone_number}
                 onChange={(e) => setPhoneNum(e.value)}
                 error={phoneNumberError}
                 types={["mobile", "landline"]}
+                className="w-full grow"
               />
               <PhoneNumberFormField
                 label="Search by Emergency Number"
@@ -1005,6 +1007,7 @@ export const PatientManager = () => {
                 onChange={(e) => setEmergencyPhoneNum(e.value)}
                 error={emergencyPhoneNumberError}
                 types={["mobile", "landline"]}
+                className="w-full"
               />
             </div>
           </div>