Make header in patient dashboard more responsive. Fixes #6488 (#6515)

ohcnetwork · Oct 31, 2023 · b43f8d5 · b43f8d5
1 parent 343ff7e
commit b43f8d5
Showing 1 changed file with 19 additions and 21 deletions.
diff --git a/src/Components/Facility/ConsultationDetails/index.tsx b/src/Components/Facility/ConsultationDetails/index.tsx
@@ -271,7 +271,7 @@ export const ConsultationDetails = (props: any) => {
       />
 
       <div className="px-2 pb-2">
-        <nav className="relative flex flex-wrap justify-between">
+        <nav className="relative flex flex-wrap items-start justify-between">
           <PageTitle
             title="Patient Dashboard"
             className="sm:m-0 sm:p-0"
@@ -290,9 +290,9 @@ export const ConsultationDetails = (props: any) => {
             breadcrumbs={true}
             backUrl="/patients"
           />
-          <div className="-right-6 top-0 flex w-full flex-col space-y-1 sm:w-min sm:flex-row sm:items-center sm:space-y-0 sm:divide-x-2 lg:absolute xl:right-0">
+          <div className="flex w-full flex-col min-[1150px]:w-min min-[1150px]:flex-row min-[1150px]:items-center">
             {!consultationData.discharge_date && (
-              <div className="flex w-full flex-col px-2 sm:flex-row">
+              <>
                 {hasActiveShiftingRequest() ? (
                   <ButtonV2
                     onClick={() =>
@@ -302,7 +302,7 @@ export const ConsultationDetails = (props: any) => {
                         }`
                       )
                     }
-                    className="btn btn-primary m-1 w-full hover:text-white"
+                    className="btn btn-primary mx-1 w-full p-1.5 px-4 hover:text-white"
                   >
                     <CareIcon className="care-l-ambulance h-5 w-5" />
                     Track Shifting
@@ -315,7 +315,7 @@ export const ConsultationDetails = (props: any) => {
                         `/facility/${patientData.facility}/patient/${patientData.id}/shift/new`
                       )
                     }
-                    className="btn btn-primary m-1 w-full hover:text-white"
+                    className="btn btn-primary mx-1 w-full p-1.5 px-4 hover:text-white"
                   >
                     <CareIcon className="care-l-ambulance h-5 w-5" />
                     Shift Patient
@@ -343,23 +343,21 @@ export const ConsultationDetails = (props: any) => {
                     Camera Feed
                   </Link>
                 )}
-              </div>
+              </>
             )}
-            <div className="flex w-full flex-col px-2 sm:flex-row">
-              <Link
-                href={`/facility/${patientData.facility}/patient/${patientData.id}`}
-                className="btn btn-primary m-1 w-full hover:text-white"
-              >
-                Patient Details
-              </Link>
-              <Link
-                id="patient_doctor_notes"
-                href={`/facility/${patientData.facility}/patient/${patientData.id}/notes`}
-                className="btn btn-primary m-1 w-full hover:text-white"
-              >
-                Doctor&apos;s Notes
-              </Link>
-            </div>
+            <Link
+              href={`/facility/${patientData.facility}/patient/${patientData.id}`}
+              className="btn btn-primary m-1 w-full hover:text-white"
+            >
+              Patient Details
+            </Link>
+            <Link
+              id="patient_doctor_notes"
+              href={`/facility/${patientData.facility}/patient/${patientData.id}/notes`}
+              className="btn btn-primary m-1 w-full hover:text-white"
+            >
+              Doctor&apos;s Notes
+            </Link>
           </div>
         </nav>
         <div className="mt-2 flex w-full flex-col md:flex-row">