MAR Table: fix column freeze

ohcnetwork · Sep 13, 2023 · 0a74227 · 0a74227
1 parent d92287c
commit 0a74227
Showing 1 changed file with 43 additions and 39 deletions.
diff --git a/src/Components/Medicine/PrescriptionAdministrationsTable.tsx b/src/Components/Medicine/PrescriptionAdministrationsTable.tsx
@@ -158,19 +158,21 @@ export default function PrescriptionAdministrationsTable({
       />
 
       <div className="relative overflow-x-auto rounded border border-white shadow">
-        <table className="w-full overflow-x-scroll whitespace-nowrap rounded">
+        <table className="w-full whitespace-nowrap rounded">
           <thead className="bg-white text-xs font-medium text-black">
             <tr>
-              <th className="sticky left-0 z-10 flex justify-between gap-2 bg-white py-3 pl-4 text-left">
-                <span className="text-sm">{t("medicine")}</span>
-                <span className="px-2 text-center text-xs leading-none">
-                  <p>Dosage &</p>
-                  <p>
-                    {!state?.prescriptions[0]?.is_prn
-                      ? "Frequency"
-                      : "Indicator"}
-                  </p>
-                </span>
+              <th className="sticky left-0 z-10 bg-white py-3 pl-4 text-left">
+                <div className="flex justify-between gap-2">
+                  <span className="text-sm">{t("medicine")}</span>
+                  <span className="px-2 text-center text-xs leading-none">
+                    <p>Dosage &</p>
+                    <p>
+                      {!state?.prescriptions[0]?.is_prn
+                        ? "Frequency"
+                        : "Indicator"}
+                    </p>
+                  </span>
+                </div>
               </th>
 
               <th>
@@ -405,40 +407,42 @@ const PrescriptionRow = ({ prescription, ...props }: PrescriptionRowProps) => {
         </DialogModal>
       )}
       <td
-        className="sticky left-0 z-10 flex cursor-pointer justify-between gap-2 bg-gray-100 py-3 pl-4 text-left transition-all duration-200 ease-in-out group-hover:bg-primary-100"
+        className="sticky left-0 z-10 cursor-pointer bg-gray-100 py-3 pl-4 text-left transition-all duration-200 ease-in-out group-hover:bg-primary-100"
         onClick={() => setShowDetails(true)}
       >
-        <div className="flex items-center gap-2">
-          <span
-            className={classNames(
-              "text-sm font-semibold",
-              prescription.discontinued ? "text-gray-700" : "text-gray-900"
+        <div className="flex justify-between gap-2">
+          <div className="flex items-center gap-2">
+            <span
+              className={classNames(
+                "text-sm font-semibold",
+                prescription.discontinued ? "text-gray-700" : "text-gray-900"
+              )}
+            >
+              {prescription.medicine_object?.name ?? prescription.medicine_old}
+            </span>
+
+            {prescription.discontinued && (
+              <span className="rounded-full border border-gray-500 bg-gray-200 px-1.5 text-xs font-medium text-gray-700">
+                {t("discontinued")}
+              </span>
             )}
-          >
-            {prescription.medicine_object?.name ?? prescription.medicine_old}
-          </span>
 
-          {prescription.discontinued && (
-            <span className="rounded-full border border-gray-500 bg-gray-200 px-1.5 text-xs font-medium text-gray-700">
-              {t("discontinued")}
-            </span>
-          )}
+            {prescription.route && (
+              <span className="rounded-full border border-blue-500 bg-blue-100 px-1.5 text-xs font-medium text-blue-700">
+                {t(prescription.route)}
+              </span>
+            )}
+          </div>
 
-          {prescription.route && (
-            <span className="rounded-full border border-blue-500 bg-blue-100 px-1.5 text-xs font-medium text-blue-700">
-              {t(prescription.route)}
-            </span>
-          )}
+          <span className="px-2 text-center text-xs font-semibold text-gray-900">
+            <p>{prescription.dosage}</p>
+            <p>
+              {!prescription.is_prn
+                ? t("PRESCRIPTION_FREQUENCY_" + prescription.frequency)
+                : prescription.indicator}
+            </p>
+          </span>
         </div>
-
-        <span className="px-2 text-center text-xs font-semibold text-gray-900">
-          <p>{prescription.dosage}</p>
-          <p>
-            {!prescription.is_prn
-              ? t("PRESCRIPTION_FREQUENCY_" + prescription.frequency)
-              : prescription.indicator}
-          </p>
-        </span>
       </td>
 
       <td />