Make header in patient dashboard more responsive. Fixes ohcnetwork#6488

Omkar76 · Oct 29, 2023 · 4c1fe6d · 4c1fe6d
1 parent e452bb5
commit 4c1fe6d
Showing 1 changed file with 8 additions and 8 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 gap-2 space-y-1 sm:space-y-0 sm:divide-x-2 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 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 hover:text-white"
                   >
                     <CareIcon className="care-l-ambulance h-5 w-5" />
                     Shift Patient
@@ -343,9 +343,9 @@ 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"
@@ -359,7 +359,7 @@ export const ConsultationDetails = (props: any) => {
               >
                 Doctor&apos;s Notes
               </Link>
-            </div>
+            </>
           </div>
         </nav>
         <div className="mt-2 flex w-full flex-col md:flex-row">