From 4cc489ab854c787db03fa7be568f7acbd1bf915b Mon Sep 17 00:00:00 2001
From: Kushal Bhana <kushalbhana2050@gmail.com>
Date: Thu, 15 Aug 2024 16:28:35 +0530
Subject: [PATCH] responsive print in prescription module

---
 src/CAREUI/misc/PrintPreview.tsx              | 22 +++++++++++--------
 .../Medicine/ManagePrescriptions.tsx          | 16 ++++++--------
 src/Components/Medicine/PrintPreview.tsx      |  6 ++---
 tailwind.config.js                            |  1 +
 4 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/src/CAREUI/misc/PrintPreview.tsx b/src/CAREUI/misc/PrintPreview.tsx
index 243826c7337..78f9de33850 100644
--- a/src/CAREUI/misc/PrintPreview.tsx
+++ b/src/CAREUI/misc/PrintPreview.tsx
@@ -14,18 +14,22 @@ type Props = {
 export default function PrintPreview(props: Props) {
   return (
     <Page title={props.title}>
-      <div className="mx-auto my-8 w-[50rem]">
-        <div className="top-0 z-20 flex justify-end gap-2 bg-secondary-100 px-2 py-4 xl:absolute xl:right-6 xl:top-8">
-          <ButtonV2 disabled={props.disabled} onClick={() => window.print()}>
-            <CareIcon icon="l-print" className="text-lg" />
-            Print
-          </ButtonV2>
-        </div>
+      <div className="my-8 md:mx-auto md:w-[50rem]">
+        <div className="top-0 z-20 flex flex-wrap justify-end gap-2 bg-secondary-100 px-2 py-4 xl:absolute xl:right-6 xl:top-8"></div>
 
-        <div className="bg-white p-10 text-sm shadow-2xl transition-all duration-200 ease-in-out">
+        <div className="bg-white  text-sm shadow-2xl transition-all duration-200 ease-in-out md:p-10">
+          <div className="flex justify-end p-5">
+            <ButtonV2 disabled={props.disabled} onClick={() => window.print()}>
+              <CareIcon icon="l-print" className="text-lg" />
+              Print
+            </ButtonV2>
+          </div>
           <div
             id="section-to-print"
-            className={classNames("w-full", props.className)}
+            className={classNames(
+              "w-full scale-75 md:scale-100",
+              props.className,
+            )}
           >
             {props.children}
           </div>
diff --git a/src/Components/Medicine/ManagePrescriptions.tsx b/src/Components/Medicine/ManagePrescriptions.tsx
index 8409e721779..500ccf95106 100644
--- a/src/Components/Medicine/ManagePrescriptions.tsx
+++ b/src/Components/Medicine/ManagePrescriptions.tsx
@@ -10,19 +10,17 @@ export default function ManagePrescriptions() {
   const { goBack } = useAppHistory();
 
   return (
-    <Page
-      title={t("manage_prescriptions")}
-      options={
-        <ButtonV2 href="prescriptions/print">
-          <CareIcon icon="l-print" className="text-lg" />
-          Print
-        </ButtonV2>
-      }
-    >
+    <Page title={t("manage_prescriptions")}>
       <div
         className="mx-auto flex w-full max-w-5xl flex-col gap-10 rounded bg-white p-6 transition-all sm:rounded-xl sm:p-12"
         id="medicine-preview"
       >
+        <div className="flex justify-end">
+          <ButtonV2 href="prescriptions/print">
+            <CareIcon icon="l-print" className="text-lg" />
+            Print
+          </ButtonV2>
+        </div>
         <div className="flex flex-col gap-10 divide-y-2 divide-dashed divide-secondary-600">
           <div>
             <h3 className="mb-4 text-lg font-semibold">
diff --git a/src/Components/Medicine/PrintPreview.tsx b/src/Components/Medicine/PrintPreview.tsx
index 09bad44d630..1b108490e3f 100644
--- a/src/Components/Medicine/PrintPreview.tsx
+++ b/src/Components/Medicine/PrintPreview.tsx
@@ -52,7 +52,7 @@ export default function PrescriptionsPrintPreview() {
         <img className="h-10 w-auto" src={main_logo.dark} alt="care logo" />
       </div>
       <div className="mb-6 grid grid-cols-8 gap-y-1.5 border-2 border-secondary-400 p-2">
-        <PatientDetail name="Patient" className="col-span-5">
+        <PatientDetail name="Patient" className="col-span-5 ">
           {patient && (
             <>
               <span className="uppercase">{patient.name}</span> -{" "}
@@ -71,7 +71,7 @@ export default function PrescriptionsPrintPreview() {
               ? `${t(`encounter_suggestion__${encounter.suggestion}`)} on`
               : ""
           }
-          className="col-span-5"
+          className="col-span-5 "
         >
           {formatDate(encounter?.encounter_date)}
         </PatientDetail>
@@ -122,7 +122,7 @@ const PatientDetail = ({
   return (
     <div
       className={classNames(
-        "inline-flex items-center whitespace-nowrap text-sm tracking-wide",
+        "inline-flex items-center whitespace-nowrap text-[9px] tracking-wide md:text-sm",
         className,
       )}
     >
diff --git a/tailwind.config.js b/tailwind.config.js
index a40c805621f..50e43f5bf33 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -24,6 +24,7 @@ module.exports = {
       ...defaultTheme.screens,
       "3xl": "1920px",
     },
+
     extend: {
       fontFamily: {
         sans: ["Inter", "sans-serif"],