From 33a96452fd756f5eb4564d936a023198f337d2e6 Mon Sep 17 00:00:00 2001
From: ayushpatil2122 <ayushitkhede4@gmail.com>
Date: Mon, 2 Dec 2024 23:17:41 +0530
Subject: [PATCH] Fix responsiveness of FacilityCard and ManagePatients
 components

---
 src/components/Facility/FacilityCard.tsx  |   2 +-
 src/components/Patient/ManagePatients.tsx | 104 +++++++++++-----------
 2 files changed, 55 insertions(+), 51 deletions(-)

diff --git a/src/components/Facility/FacilityCard.tsx b/src/components/Facility/FacilityCard.tsx
index 0d9c5678d4c..e61d5b8fd77 100644
--- a/src/components/Facility/FacilityCard.tsx
+++ b/src/components/Facility/FacilityCard.tsx
@@ -117,7 +117,7 @@ export const FacilityCard = (props: {
                         href={`/facility/${facility.id}/cns`}
                         border
                         ghost
-                        className="mt-2 sm:mt-0"
+                        className="mt-2 sm:mt-0 md:mt-1"
                       >
                         <CareIcon
                           icon="l-monitor-heart-rate"
diff --git a/src/components/Patient/ManagePatients.tsx b/src/components/Patient/ManagePatients.tsx
index 9507ce3d8d7..74264211247 100644
--- a/src/components/Patient/ManagePatients.tsx
+++ b/src/components/Patient/ManagePatients.tsx
@@ -796,52 +796,54 @@ export const PatientManager = () => {
       hideBack={true}
       breadcrumbs={false}
       options={
-        <div className="flex w-full flex-col items-center justify-between lg:flex-row">
-          <div className="mb-2 flex w-full flex-col items-center lg:mb-0 lg:w-fit lg:flex-row lg:gap-5">
-            <ButtonV2
-              id="add-patient-details"
-              onClick={() => {
-                const showAllFacilityUsers = ["DistrictAdmin", "StateAdmin"];
-                if (
-                  qParams.facility &&
-                  showAllFacilityUsers.includes(authUser.user_type)
-                )
-                  navigate(`/facility/${qParams.facility}/patient`);
-                else if (
-                  qParams.facility &&
-                  !showAllFacilityUsers.includes(authUser.user_type) &&
-                  authUser.home_facility_object?.id !== qParams.facility
-                )
-                  Notification.Error({
-                    msg: "Oops! Non-Home facility users don't have permission to perform this action.",
-                  });
-                else if (
-                  !showAllFacilityUsers.includes(authUser.user_type) &&
-                  authUser.home_facility_object?.id
-                ) {
-                  navigate(
-                    `/facility/${authUser.home_facility_object.id}/patient`,
-                  );
-                } else if (onlyAccessibleFacility)
-                  navigate(`/facility/${onlyAccessibleFacility.id}/patient`);
-                else if (
-                  !showAllFacilityUsers.includes(authUser.user_type) &&
-                  !authUser.home_facility_object?.id
-                )
-                  Notification.Error({
-                    msg: "Oops! No home facility found",
-                  });
-                else setShowDialog("create");
-              }}
-              className="w-full lg:w-fit"
-            >
-              <CareIcon icon="l-plus" className="text-lg" />
-              <p id="add-patient-div" className="lg:my-[2px]">
-                Add Patient
-              </p>
-            </ButtonV2>
+        <div >
+          <div className="flex w-full flex-col items-center justify-between md:flex-row md:gap-4 lg:gap-5">
+            <div className="mb-2 flex w-full flex-col items-center md:w-1/2 lg:w-fit lg:flex-row lg:gap-5">
+              <ButtonV2
+                id="add-patient-details"
+                onClick={() => {
+                  const showAllFacilityUsers = ["DistrictAdmin", "StateAdmin"];
+                  if (
+                    qParams.facility &&
+                    showAllFacilityUsers.includes(authUser.user_type)
+                  )
+                    navigate(`/facility/${qParams.facility}/patient`);
+                  else if (
+                    qParams.facility &&
+                    !showAllFacilityUsers.includes(authUser.user_type) &&
+                    authUser.home_facility_object?.id !== qParams.facility
+                  )
+                    Notification.Error({
+                      msg: "Oops! Non-Home facility users don't have permission to perform this action.",
+                    });
+                  else if (
+                    !showAllFacilityUsers.includes(authUser.user_type) &&
+                    authUser.home_facility_object?.id
+                  ) {
+                    navigate(
+                      `/facility/${authUser.home_facility_object.id}/patient`,
+                    );
+                  } else if (onlyAccessibleFacility)
+                    navigate(`/facility/${onlyAccessibleFacility.id}/patient`);
+                  else if (
+                    !showAllFacilityUsers.includes(authUser.user_type) &&
+                    !authUser.home_facility_object?.id
+                  )
+                    Notification.Error({
+                      msg: "Oops! No home facility found",
+                    });
+                  else setShowDialog("create");
+                }}
+                className="w-full md:w-auto lg:w-fit"
+              >
+                <CareIcon icon="l-plus" className="text-lg" />
+                <p id="add-patient-div" className="lg:my-[2px]">
+                  Add Patient
+                </p>
+              </ButtonV2>
+            </div>
           </div>
-          <div className="flex w-full flex-col items-center justify-end gap-2 lg:ml-3 lg:w-fit lg:flex-row lg:gap-3">
+          <div className="flex w-full flex-col items-center justify-end gap-2 md:w-1/2 md:flex-row md:gap-3 lg:w-fit lg:ml-3">
             <Tabs
               tabs={[
                 { text: t("live"), value: 0 },
@@ -875,7 +877,7 @@ export const PatientManager = () => {
             />
             {!!params.facility && (
               <ButtonV2
-                className="w-full lg:w-fit"
+                className="w-full md:w-auto lg:w-fit"
                 id="doctor-connect-patient-button"
                 onClick={() => {
                   triggerGoal("Doctor Connect Clicked", {
@@ -891,9 +893,11 @@ export const PatientManager = () => {
               </ButtonV2>
             )}
 
-            <AdvancedFilterButton
-              onClick={() => advancedFilter.setShow(true)}
-            />
+            <div className="w-full md:w-auto">
+              <AdvancedFilterButton
+                onClick={() => advancedFilter.setShow(true)}
+              />
+            </div>
             <SortDropdownMenu
               options={PATIENT_SORT_OPTIONS}
               selected={qParams.ordering}
@@ -914,7 +918,7 @@ export const PatientManager = () => {
                       });
                     }, 500);
                   }}
-                  className="mr-5 w-full lg:w-fit"
+                  className="w-full md:w-auto lg:w-fit"
                 >
                   <CareIcon icon="l-export" />
                   <span className="lg:my-[3px]">Export</span>