Fix spacing in user list, remove scrollbar on large screens, and adju…

…st schedule appointment button (#9864)
ohcnetwork · Jan 11, 2025 · 1dc6138 · 1dc6138
1 parent dc3fd52
commit 1dc6138
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 12 deletions.
diff --git a/src/components/Patient/PatientDetailsTab/Appointments.tsx b/src/components/Patient/PatientDetailsTab/Appointments.tsx
@@ -59,12 +59,15 @@ export const Appointments = (props: PatientProps) => {
 
   return (
     <div className="mt-4 px-3 md:px-0">
-      <div className="flex justify-between items-center mb-4">
-        <h2 className="text-2xl font-semibold leading-tight">
+      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mb-4 space-y-2 sm:space-y-0">
+        <h2 className="text-2xl font-semibold leading-tight text-center sm:text-left">
           {t("appointments")}
         </h2>
         <Button variant="outline_primary" asChild>
-          <Link href={`/facility/${facilityId}/patient/${id}/book-appointment`}>
+          <Link
+            href={`/facility/${facilityId}/patient/${id}/book-appointment`}
+            className="flex items-center justify-center w-full sm:w-auto"
+          >
             <CareIcon icon="l-plus" className="mr-2" />
             {t("schedule_appointment")}
           </Link>

diff --git a/src/components/Users/UserListAndCard.tsx b/src/components/Users/UserListAndCard.tsx
@@ -16,7 +16,12 @@ import useWindowDimensions from "@/hooks/useWindowDimensions";
 
 import { USER_TYPE_OPTIONS } from "@/common/constants";
 
-import { formatName, isUserOnline, relativeTime } from "@/Utils/utils";
+import {
+  formatName,
+  formatPhoneNumber,
+  isUserOnline,
+  relativeTime,
+} from "@/Utils/utils";
 import { UserBase } from "@/types/user/user";
 
 export const GetUserTypes = () => {
@@ -191,13 +196,12 @@ const UserListHeader = ({
         <th className="sticky left-0 z-10 bg-gray-50 px-4 py-3 text-left">
           {t("name")}
         </th>
-        <th className="w-32 px-4 py-3 text-left">{t("status")}</th>
-        <th className="px-4 py-3 text-left">{t("role")}</th>
-        <th className="px-4 py-3 text-left">{t("home_facility")}</th>
+        <th className="w-32 px-10 py-3 text-left">{t("status")}</th>
+        <th className="px-10 py-3 text-left">{t("role")}</th>
+        <th className="px-4 py-3 text-left">{t("contact_number")}</th>
         {showDistrictColumn && (
           <th className="px-4 py-3 text-left">{t("district")}</th>
         )}
-        <th className="px-4 py-3"></th>
       </tr>
     </thead>
   );
@@ -210,7 +214,7 @@ const UserListRow = ({ user }: { user: UserBase }) => {
       id={`usr_${user.id}`}
       className="hover:bg-gray-50"
     >
-      <td className="sticky left-0 z-10 bg-white px-4 py-4">
+      <td className="sticky left-0 z-10 bg-white px-4 py-4 lg:pr-20">
         <div className="flex items-center gap-3">
           <Avatar
             // TO do: adjust for facility users
@@ -233,12 +237,15 @@ const UserListRow = ({ user }: { user: UserBase }) => {
           </div>
         </div>
       </td>
-      <td className="flex-0 py-4">
+      <td className="flex-0 px-6 py-4">
         <UserStatusIndicator user={user} addPadding />
       </td>
-      <td id="role" className="px-4 py-4 text-sm">
+      <td id="role" className="px-10 py-4 text-sm">
         {user.user_type}
       </td>
+      <td id="contact" className="px-4 py-4 text-sm whitespace-nowrap">
+        {formatPhoneNumber(user.phone_number)}
+      </td>
       <td className="px-4 py-4">{GetDetailsButton(user.username)}</td>
     </tr>
   );

diff --git a/src/pages/Encounters/tabs/EncounterFilesTab.tsx b/src/pages/Encounters/tabs/EncounterFilesTab.tsx
@@ -356,7 +356,7 @@ export const EncounterFilesTab = (props: EncounterTabProps) => {
 
   const RenderTable = () => {
     return (
-      <Table className="border-separate border-spacing-y-3 mx-2 min-w-[800px] lg:max-w-[calc(100%-12px)]">
+      <Table className="border-separate border-spacing-y-3 mx-2 min-w-[800px] lg:max-w-[calc(100%-16px)]">
         <TableHeader>
           <TableRow className="shadow rounded overflow-hidden">
             <TableHead className="w-[30%] bg-white rounded-l">