Dosage heading is misaligned in the prescription module #8645 (#8751)

ohcnetwork · Nov 11, 2024 · 8a9078d · 8a9078d
1 parent fc4f94d
commit 8a9078d
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 26 deletions.
diff --git a/src/components/Medicine/MedicineAdministrationSheet/AdministrationTable.tsx b/src/components/Medicine/MedicineAdministrationSheet/AdministrationTable.tsx
@@ -31,17 +31,17 @@ export default function MedicineAdministrationTable({
         <thead className="sticky top-0 z-10 bg-secondary-50 text-xs font-medium text-black">
           <tr>
             <th className="sticky left-0 z-20 bg-secondary-50 py-3 pl-4 text-left">
-              <div className="flex justify-between gap-2">
-                <span className="text-sm">{t("medicine")}</span>
-                <span className="hidden px-2 text-center text-xs leading-none lg:block">
-                  <p>Dosage &</p>
-                  <p>
-                    {prescriptions[0]?.dosage_type !== "PRN"
-                      ? "Frequency"
-                      : "Indicator"}
-                  </p>
-                </span>
-              </div>
+              <span className="text-sm">{t("medicine")}</span>
+            </th>
+            <th>
+              <span className="hidden px-2 text-center text-xs leading-none lg:block">
+                <p>{t("dosage")} &</p>
+                <p>
+                  {prescriptions[0]?.dosage_type !== "PRN"
+                    ? t("frequency")
+                    : t("indicator")}
+                </p>
+              </span>
             </th>
 
             <th>

diff --git a/src/components/Medicine/MedicineAdministrationSheet/AdministrationTableRow.tsx b/src/components/Medicine/MedicineAdministrationSheet/AdministrationTableRow.tsx
@@ -59,6 +59,25 @@ export default function MedicineAdministrationTableRow({
       key: `${prescription.last_administration?.administered_date}`,
     },
   );
+  const DosageFrequencyInfo = () => (
+    <div className="flex justify-center">
+      <div className="flex gap-1 text-xs font-semibold text-secondary-900 lg:flex-col lg:px-2 lg:text-center">
+        {prescription.dosage_type !== "TITRATED" ? (
+          <p>{prescription.base_dosage}</p>
+        ) : (
+          <p>
+            {prescription.base_dosage} - {prescription.target_dosage}
+          </p>
+        )}
+
+        <p className="max-w-[6rem] truncate">
+          {prescription.dosage_type !== "PRN"
+            ? t("PRESCRIPTION_FREQUENCY_" + prescription.frequency)
+            : prescription.indicator}
+        </p>
+      </div>
+    </div>
+  );
 
   return (
     <>
@@ -216,24 +235,14 @@ export default function MedicineAdministrationTableRow({
                 {prescription.medicine_object?.generic}
               </span>
             </div>
-
-            <div className="flex gap-1 text-xs font-semibold text-secondary-900 lg:flex-col lg:px-2 lg:text-center">
-              {prescription.dosage_type !== "TITRATED" ? (
-                <p>{prescription.base_dosage}</p>
-              ) : (
-                <p>
-                  {prescription.base_dosage} - {prescription.target_dosage}
-                </p>
-              )}
-
-              <p>
-                {prescription.dosage_type !== "PRN"
-                  ? t("PRESCRIPTION_FREQUENCY_" + prescription.frequency)
-                  : prescription.indicator}
-              </p>
+            <div className="block lg:hidden">
+              <DosageFrequencyInfo />
             </div>
           </div>
         </td>
+        <td className="hidden lg:table-cell">
+          <DosageFrequencyInfo />
+        </td>
 
         <td />