From dd4ad7bb193ac9ffa5b8fb9d3f01eff8fb493906 Mon Sep 17 00:00:00 2001
From: Rithvik Nishad <mail@rithviknishad.dev>
Date: Mon, 22 Jul 2024 16:20:20 +0530
Subject: [PATCH] Fixes spacing issue in patient list phone number field and
 search inputs (#8185)

* fixes #8181

* show error only when out of focus

* Revert "show error only when out of focus"

This reverts commit 5a33cb78fbe1dcb4c544610ab81fd15b158ec139.
---
 src/Components/Patient/ManagePatients.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/Components/Patient/ManagePatients.tsx b/src/Components/Patient/ManagePatients.tsx
index b6fc98935e2..087bd9af209 100644
--- a/src/Components/Patient/ManagePatients.tsx
+++ b/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,21 +974,23 @@ 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")}
@@ -997,6 +998,7 @@ export const PatientManager = () => {
                 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>