From 92a26967c3490ef8195191ff968b65e6aa1ff05f Mon Sep 17 00:00:00 2001
From: Gokulram A <40627011+GokulramGHV@users.noreply.github.com>
Date: Tue, 4 Oct 2022 17:58:40 +0530
Subject: [PATCH] Made 'Treatment Summary' page responsive (#3643)

* Made 'Treatment Summary' page responsive

* used print: instead of clsx
---
 src/Components/Facility/TreatmentSummary.tsx | 26 ++++++++++----------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/Components/Facility/TreatmentSummary.tsx b/src/Components/Facility/TreatmentSummary.tsx
index 24de3117976..d2535c8a050 100644
--- a/src/Components/Facility/TreatmentSummary.tsx
+++ b/src/Components/Facility/TreatmentSummary.tsx
@@ -3,7 +3,7 @@ import { useDispatch } from "react-redux";
 import { getPatient, getInvestigation } from "../../Redux/actions";
 import { ConsultationModel } from "./models";
 import { statusType, useAbortableEffect } from "../../Common/utils";
-import { PatientModel, DailyRoundsModel } from "../Patient/models";
+import { PatientModel } from "../Patient/models";
 import loadable from "@loadable/component";
 import moment from "moment";
 import { getConsultation } from "../../Redux/actions";
@@ -93,7 +93,7 @@ const TreatmentSummary = (props: any) => {
         <Loading />
       ) : (
         <div className="my-4">
-          <div className="my-4 flex justify-end ">
+          <div className="my-4 flex sm:justify-end flex-wrap justify-center gap-2">
             <button
               onClick={(_) => window.print()}
               className="btn btn-primary mr-2"
@@ -120,8 +120,8 @@ const TreatmentSummary = (props: any) => {
             </div>
 
             <div className="mt-2 mb-5 border border-gray-800">
-              <div className="border-b-2 border-gray-800 grid grid-cols-3">
-                <div className="col-span-1 py-2 px-3 border-r-2 border-gray-800">
+              <div className="border-b-2 border-gray-800 grid sm:grid-cols-3 print:grid-cols-3">
+                <div className="col-span-1 py-2 px-3 sm:border-r-2 sm:border-b-0 print:border-r-2 print:border-b-0 border-b-2 border-gray-800">
                   <b>Name :</b> {patientData.name}
                 </div>
                 <div className="col-span-1 py-2 px-3">
@@ -129,11 +129,11 @@ const TreatmentSummary = (props: any) => {
                 </div>
               </div>
 
-              <div className="border-b-2 border-gray-800 grid grid-cols-3">
-                <div className="col-span-1 py-2 px-3 border-r-2 border-gray-800">
+              <div className="border-b-2 border-gray-800 grid sm:grid-cols-2 md:grid-cols-3 print:grid-cols-3">
+                <div className="col-span-1 py-2 px-3 sm:border-r-2 md:border-b-0 print:border-r-2 print:border-b-0 border-b-2 border-gray-800 ">
                   <b>Age :</b> {patientData.age}
                 </div>
-                <div className="col-span-1 py-2 px-3 border-r-2 border-gray-800">
+                <div className="col-span-1 py-2 px-3 md:border-r-2 md:border-b-0 print:border-r-2 print:border-b-0 border-b-2 border-gray-800">
                   <b>Date of admission :</b>
                   <span>
                     {consultationData.admitted
@@ -151,13 +151,13 @@ const TreatmentSummary = (props: any) => {
                 </div>
               </div>
 
-              <div className="border-b-2 border-gray-800 grid grid-cols-3">
-                <div className="col-span-1 py-2 px-3 border-r-2 border-gray-800">
+              <div className="border-b-2 border-gray-800 grid sm:grid-cols-2 md:grid-cols-3 print:grid-cols-3">
+                <div className="col-span-1 py-2 px-3 sm:border-r-2 md:border-b-0 print:border-r-2 print:border-b-0 border-b-2 border-gray-800">
                   <b>Gender :</b>
                   {GENDER_TYPES.find((i) => i.id === patientData.gender)?.text}
                 </div>
 
-                <div className="col-span-1 py-2 px-3 border-r-2 border-gray-800">
+                <div className="col-span-1 py-2 px-3 md:border-r-2 md:border-b-0 print:border-r-2 print:border-b-0 border-b-2 border-gray-800">
                   <b>Contact person :</b>
                   <span>
                     {" "}
@@ -179,7 +179,7 @@ const TreatmentSummary = (props: any) => {
 
               <div className="border-b-2 border-gray-800 px-5 py-2">
                 <b>Comorbidities :</b>
-                <div className="mx-5">
+                <div className="print:mx-5 mx-0 sm:mx-5">
                   <table className="border-collapse border border-gray-800 w-full">
                     <thead>
                       <tr>
@@ -267,7 +267,7 @@ const TreatmentSummary = (props: any) => {
               <div className="border-b-2 border-gray-800 px-5 py-2">
                 <b>Relevant investigations :</b>
 
-                <div className="mx-5">
+                <div className="print:mx-5 mx-0 sm:mx-5 overflow-x-auto">
                   <table className="border-collapse border border-gray-800 w-full">
                     <thead>
                       <tr>
@@ -365,7 +365,7 @@ const TreatmentSummary = (props: any) => {
                 )}
                 <b className="mb-2">Treatment summary/Treament Plan :</b>
 
-                <div className="mx-5">
+                <div className="print:mx-5 mx-0 sm:mx-5 overflow-x-auto">
                   <table className="border-collapse border border-gray-800 w-full">
                     <thead>
                       <tr>