responsive print in prescription module

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>

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">

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,
       )}
     >

tailwind.config.js

@@ -24,6 +24,7 @@ module.exports = {
       ...defaultTheme.screens,
       "3xl": "1920px",
     },
+
     extend: {
       fontFamily: {
         sans: ["Inter", "sans-serif"],