fixes overflow issues in consultation dashboard (#7932)

* fixes overflow issues in consultation dashboard * Update src/Components/Common/components/Menu.tsx
ohcnetwork · May 29, 2024 · 8ae85d6 · 8ae85d6
1 parent cf5f1c3
commit 8ae85d6
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 11 deletions.
diff --git a/src/Components/Medicine/MedicineAdministrationSheet/AdministrationTable.tsx b/src/Components/Medicine/MedicineAdministrationSheet/AdministrationTable.tsx
@@ -24,7 +24,7 @@ export default function MedicineAdministrationTable({
   return (
     <div className="overflow-x-auto">
       <table className="w-full whitespace-nowrap">
-        <thead className="sticky top-0 z-20 bg-gray-50 text-xs font-medium text-black">
+        <thead className="sticky top-0 z-10 bg-gray-50 text-xs font-medium text-black">
           <tr>
             <th className="sticky left-0 z-20 bg-gray-50 py-3 pl-4 text-left">
               <div className="flex justify-between gap-2">
@@ -51,7 +51,7 @@ export default function MedicineAdministrationTable({
                 disabled={!pagination.hasPrevious}
                 onClick={pagination.previous}
                 tooltip="Previous 24 hours"
-                tooltipClassName="tooltip-bottom -translate-x-1/2 text-xs"
+                tooltipClassName="tooltip-bottom text-xs"
               >
                 <CareIcon icon="l-angle-left-b" className="text-base" />
               </ButtonV2>

diff --git a/src/Components/Patient/PatientInfoCard.tsx b/src/Components/Patient/PatientInfoCard.tsx
@@ -185,9 +185,9 @@ export default function PatientInfoCard(props: {
         </>
       )}
 
-      <section className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
+      <section className="flex flex-col lg:flex-row">
         <div
-          className="col-span-2 flex w-full flex-col bg-white px-4 pt-2 lg:flex-row xl:min-w-fit"
+          className="flex w-full flex-col bg-white px-4 pt-2 lg:flex-row"
           id="patient-infobadges"
         >
           {/* Can support for patient picture in the future */}
@@ -269,7 +269,7 @@ export default function PatientInfoCard(props: {
               </div>
             </div>
           </div>
-          <div className="flex w-full flex-col items-center gap-4 space-y-2 lg:items-start lg:gap-0 lg:pl-2 xl:w-full">
+          <div className="flex w-full flex-col items-center gap-4 space-y-2 lg:items-start lg:gap-0 lg:pl-2">
             <div className="flex flex-col items-center gap-2 sm:flex-row">
               <Link
                 href={`/facility/${consultation?.facility}`}
@@ -284,7 +284,7 @@ export default function PatientInfoCard(props: {
               </Link>
 
               {medicoLegalCase && (
-                <span className="flex pl-2 capitalize md:col-span-2">
+                <span className="flex pl-2 capitalize">
                   <span className="badge badge-pill badge-danger">MLC</span>
                 </span>
               )}
@@ -301,7 +301,7 @@ export default function PatientInfoCard(props: {
               </div>
               <div className="flex flex-wrap items-center gap-2 text-sm sm:flex-row">
                 <div
-                  className="flex flex-wrap items-center justify-center gap-2 text-sm text-gray-900 sm:flex-row sm:text-sm md:pr-10 lg:justify-normal"
+                  className="flex w-full flex-wrap items-center justify-center gap-2 text-sm text-gray-900 sm:flex-row sm:text-sm md:pr-10 lg:justify-normal"
                   id="patient-consultationbadges"
                 >
                   {consultation?.patient_no && (
@@ -520,12 +520,12 @@ export default function PatientInfoCard(props: {
           </div>
         </div>
         <div
-          className="col-span-2 flex w-full flex-col items-center justify-end gap-2 px-4 py-1 lg:col-span-1 2xl:flex-row"
+          className="flex flex-col items-center justify-end gap-4 px-4 py-1 2xl:flex-row"
           id="consultation-buttons"
         >
           {consultation?.suggestion === "A" && (
             <div className="flex flex-col items-center">
-              <div className="col-span-1 flex w-full justify-center bg-white px-4 lg:flex-row">
+              <div className="flex w-full justify-center bg-white px-4 lg:flex-row">
                 <div
                   className={
                     "flex h-7 w-7 items-center justify-center rounded-full border-2"
@@ -545,7 +545,7 @@ export default function PatientInfoCard(props: {
             </div>
           )}
           {consultation?.last_daily_round && (
-            <div className="col-span-1 flex w-full justify-center bg-white px-4 lg:flex-row">
+            <div className="flex w-full justify-center bg-white px-4 lg:flex-row">
               <Mews dailyRound={consultation?.last_daily_round} />
             </div>
           )}
@@ -633,7 +633,7 @@ export default function PatientInfoCard(props: {
             <DropdownMenu
               id="show-more"
               itemClassName="min-w-0 sm:min-w-[225px]"
-              title={"Manage Patient"}
+              title="Manage Patient"
               icon={<CareIcon icon="l-setting" className="text-xl" />}
               className="xl:justify-center"
               containerClassName="w-full lg:w-auto mt-2 2xl:mt-0 flex justify-center z-20"