From 1dc6138688c7876adddaa74427113dbc659a22a4 Mon Sep 17 00:00:00 2001
From: Kamishetty Rishith <119791436+Rishith25@users.noreply.github.com>
Date: Sat, 11 Jan 2025 11:33:37 +0530
Subject: [PATCH] Fix spacing in user list, remove scrollbar on large screens,
 and adjust schedule appointment button (#9864)

---
 .../PatientDetailsTab/Appointments.tsx        |  9 +++++---
 src/components/Users/UserListAndCard.tsx      | 23 ++++++++++++-------
 .../Encounters/tabs/EncounterFilesTab.tsx     |  2 +-
 3 files changed, 22 insertions(+), 12 deletions(-)

diff --git a/src/components/Patient/PatientDetailsTab/Appointments.tsx b/src/components/Patient/PatientDetailsTab/Appointments.tsx
index 24bd7b9017e..8b6228c4125 100644
--- 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
index 6422f096f2f..f6a7e1fb7a7 100644
--- 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
index 053637b75d8..364a40325ab 100644
--- 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">