Refactor padding in Page component | Resource and Prescription Previe…

…w responsiveness (#10663)
ohcnetwork · Feb 21, 2025 · 0457cfa · 0457cfa
1 parent e5f90e3
commit 0457cfa
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 21 deletions.
diff --git a/src/components/Common/Page.tsx b/src/components/Common/Page.tsx
@@ -9,7 +9,6 @@ interface PageProps extends PageTitleProps {
   options?: React.ReactNode | React.ReactNode[];
   changePageMetadata?: boolean;
   className?: string;
-  noImplicitPadding?: boolean;
   ref?: RefObject<HTMLDivElement>;
   /**
    * If true, the sidebar will be collapsed when mounted, and restored to original state when unmounted.
@@ -31,14 +30,8 @@ export default function Page(props: PageProps) {
   //   };
   // }, [props.collapseSidebar]);
 
-  let padding = "";
-  if (!props.noImplicitPadding) {
-    if (props.componentRight) padding = "py-0 md:px-6";
-    else padding = "px-6 py-0";
-  }
-
   return (
-    <div className={cn(padding, props.className)} ref={props.ref}>
+    <div className={cn("md:px-6 py-0", props.className)} ref={props.ref}>
       <div className="flex flex-col justify-between gap-2 px-3 md:flex-row md:items-center md:gap-6 md:px-0">
         <PageTitle
           changePageMetadata={props.changePageMetadata}

diff --git a/src/components/Resource/PrintResourceLetter.tsx b/src/components/Resource/PrintResourceLetter.tsx
@@ -27,7 +27,7 @@ export default function PrintResourceLetter({ id }: { id: string }) {
   return (
     <PrintPreview title={t("request_letter")}>
       <div className="min-h-screen bg-white">
-        <div className="mx-4 p-4 lg:mx-20">
+        <div className="mx-4">
           {/* Header */}
           <div className="mb-8 text-center">
             <div className="text-2xl font-bold">{t("request_letter")}</div>

diff --git a/src/components/Resource/ResourceList.tsx b/src/components/Resource/ResourceList.tsx
@@ -119,7 +119,7 @@ export default function ResourceList({ facilityId }: { facilityId: string }) {
         </Badge>
       }
     >
-      <div className="space-y-4 mt-2">
+      <div className="space-y-4 mt-2 px-6">
         <div className="rounded-lg border bg-card shadow-sm">
           <div className="flex flex-col">
             <div className="flex flex-wrap items-center justify-between gap-2 p-4">

diff --git a/src/pages/Encounters/EncounterList.tsx b/src/pages/Encounters/EncounterList.tsx
@@ -229,7 +229,7 @@ export function EncounterList({
         </Badge>
       }
     >
-      <div className="space-y-4 mt-2 flex flex-col">
+      <div className="space-y-4 mt-2 flex flex-col px-6">
         <div className="rounded-lg border bg-card shadow-sm flex flex-col">
           <div className="flex flex-col">
             <div className="flex flex-wrap items-center justify-between gap-2 p-4">

diff --git a/src/pages/Encounters/PrintPrescription.tsx b/src/pages/Encounters/PrintPrescription.tsx
@@ -64,27 +64,27 @@ export const PrintPrescription = (props: {
       title={`${t("prescriptions")} - ${encounter?.patient.name}`}
       disabled={!medications}
     >
-      <div className="min-h-screen bg-white p-2 max-w-4xl mx-auto">
+      <div className="min-h-screen bg-white md:p-2 max-w-4xl mx-auto">
         <div>
           {/* Header */}
-          <div className="flex justify-between items-start mb-4 pb-2 border-b">
-            <div>
+          <div className="flex flex-col sm:flex-row justify-between items-center sm:items-start mb-4 pb-2 border-b">
+            <img
+              src={careConfig.mainLogo?.dark}
+              alt="Care Logo"
+              className="h-10 w-auto object-contain mb-2 sm:mb-0 sm:order-2"
+            />
+            <div className="text-center sm:text-left sm:order-1">
               <h1 className="text-3xl font-semibold">
                 {encounter?.facility?.name}
               </h1>
               <h2 className="text-gray-500 uppercase text-sm tracking-wide mt-1 font-semibold">
                 {t("medicine_prescription")}
               </h2>
             </div>
-            <img
-              src={careConfig.mainLogo?.dark}
-              alt="Care Logo"
-              className="h-10 w-auto object-contain"
-            />
           </div>
 
           {/* Patient Details */}
-          <div className="grid grid-cols-2 gap-x-12 gap-y-6 mb-8">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-x-12 gap-y-6 mb-8">
             <div className="space-y-3">
               <DetailRow
                 label={t("patient")}
@@ -141,7 +141,7 @@ export const PrintPrescription = (props: {
           </div>
 
           {/* Footer */}
-          <div className="mt-8 space-y-1 pt-2 text-[10px] text-gray-500 flex justify-between">
+          <div className="mt-8 pt-2 text-[10px] text-gray-500 flex justify-between flex-wrap">
             <p>
               {t("generated_on")} {format(new Date(), "PPP 'at' p")}
             </p>