fixed spacing and overflowing text in patient detail page (#5878)

ohcnetwork · Jul 21, 2023 · 5a45c03 · 5a45c03
1 parent c9bb94a
commit 5a45c03
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 5 deletions.
diff --git a/src/Components/Facility/ConsultationCard.tsx b/src/Components/Facility/ConsultationCard.tsx
@@ -121,7 +121,7 @@ export const ConsultationCard = (props: ConsultationProps) => {
       </div>
       <div className="mt-4 flex flex-col gap-1 md:flex-row justify-between w-full">
         <ButtonV2
-          className="bg-white hover:bg-gray-300 border border-gray-500 text-black"
+          className="bg-white hover:bg-gray-300 border border-gray-500 text-black whitespace-pre-wrap h-auto"
           onClick={() =>
             navigate(
               `/facility/${itemData.facility}/patient/${itemData.patient}/consultation/${itemData.id}`
@@ -131,7 +131,7 @@ export const ConsultationCard = (props: ConsultationProps) => {
           View Consultation / Consultation Updates
         </ButtonV2>
         <ButtonV2
-          className="bg-white hover:bg-gray-300 border border-gray-500 text-black"
+          className="bg-white hover:bg-gray-300 border border-gray-500 text-black whitespace-pre-wrap h-auto"
           onClick={() =>
             navigate(
               `/facility/${itemData.facility}/patient/${itemData.patient}/consultation/${itemData.id}/files/`
@@ -142,7 +142,7 @@ export const ConsultationCard = (props: ConsultationProps) => {
         </ButtonV2>
         {isLastConsultation && (
           <ButtonV2
-            className="bg-white hover:bg-gray-300 border border-gray-500 text-black"
+            className="bg-white hover:bg-gray-300 border border-gray-500 text-black whitespace-pre-wrap h-auto"
             onClick={() =>
               navigate(
                 `/facility/${itemData.facility}/patient/${itemData.patient}/consultation/${itemData.id}/daily-rounds`

diff --git a/src/Components/Patient/PatientHome.tsx b/src/Components/Patient/PatientHome.tsx
@@ -466,11 +466,11 @@ export const PatientHome = (props: any) => {
           <div className="lg:w-2/3 mx-2">
             <div className="bg-white rounded-lg shadow flex flex-col justify-between pt-11 pb-5 pl-9 h-full">
               <div>
-                <div className="flex flex-row">
+                <div className="flex flex-row gap-4">
                   <h1 className="font-bold text-2xl pb-3 flex flex-row">
                     {patientData.name} - {patientData.age}
                   </h1>
-                  <div className="flex flex-wrap gap-2 ml-auto mr-9">
+                  <div className="flex flex-wrap gap-3 ml-auto mr-9">
                     {patientData.is_vaccinated ? (
                       <Chip
                         color="blue"