From f8f0f599ef58371c8230914a1bd273d6d7a31544 Mon Sep 17 00:00:00 2001
From: rajku-dev <totoregex@gmail.com>
Date: Sat, 25 Jan 2025 14:20:39 +0530
Subject: [PATCH 01/15] Fix `PatientUsers` card overflow and Remove-btn bg

---
 .../Patient/PatientDetailsTab/PatientUsers.tsx        | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/Patient/PatientDetailsTab/PatientUsers.tsx b/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
index 8b0f1bf3790..ead2747b00f 100644
--- a/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
+++ b/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
@@ -236,7 +236,7 @@ export const PatientUsers = (props: PatientProps) => {
   const ManageUsers = () => {
     if (!users?.results?.length) {
       return (
-        <div className="h-full text-center space-y-2 mt-2 text-center rounded-lg bg-white px-7 py-12 border border-secondary-300 text-lg text-secondary-600">
+        <div className="h-full text-center space-y-2 mt-2 rounded-lg bg-white px-7 py-12 border border-secondary-300 text-lg text-secondary-600">
           {t("no_user_assigned")}
         </div>
       );
@@ -259,7 +259,12 @@ export const PatientUsers = (props: PatientProps) => {
                   <h3 className="text-sm font-medium text-gray-900">
                     {formatDisplayName(user)}
                   </h3>
-                  <p className="text-sm text-gray-500">{user.username}</p>
+                  <p
+                    className="text-sm text-gray-500 truncate sm:max-w-28"
+                    title={user.username}
+                  >
+                    {user.username}
+                  </p>
                 </div>
               </div>
               <AlertDialog>
@@ -281,7 +286,7 @@ export const PatientUsers = (props: PatientProps) => {
                     <AlertDialogCancel>{t("cancel")}</AlertDialogCancel>
                     <AlertDialogAction
                       onClick={() => removeUser(user.id)}
-                      className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                      className="bg-red-500 text-white hover:bg-red-600"
                     >
                       {t("remove")}
                     </AlertDialogAction>

From 347e49d154fcfce04f9c668c8a194cae191a907e Mon Sep 17 00:00:00 2001
From: rajku-dev <totoregex@gmail.com>
Date: Sun, 26 Jan 2025 13:44:32 +0530
Subject: [PATCH 02/15] use tooltip component

---
 .../Patient/PatientDetailsTab/PatientUsers.tsx  | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/Patient/PatientDetailsTab/PatientUsers.tsx b/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
index ead2747b00f..33a0ed605cd 100644
--- a/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
+++ b/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
@@ -32,6 +32,11 @@ import {
   SheetTitle,
   SheetTrigger,
 } from "@/components/ui/sheet";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 import { Avatar } from "@/components/Common/Avatar";
 import UserSelector from "@/components/Common/UserSelector";
@@ -259,11 +264,13 @@ export const PatientUsers = (props: PatientProps) => {
                   <h3 className="text-sm font-medium text-gray-900">
                     {formatDisplayName(user)}
                   </h3>
-                  <p
-                    className="text-sm text-gray-500 truncate sm:max-w-28"
-                    title={user.username}
-                  >
-                    {user.username}
+                  <p className="text-sm text-gray-500 truncate sm:max-w-xl lg:max-w-28">
+                    <Tooltip>
+                      <TooltipTrigger>{user.username}</TooltipTrigger>
+                      <TooltipContent>
+                        <p>{user.username}</p>
+                      </TooltipContent>
+                    </Tooltip>
                   </p>
                 </div>
               </div>

From 1dd2ccbbe047047f0ce90e2025cd47cc099f6914 Mon Sep 17 00:00:00 2001
From: rajku-dev <totoregex@gmail.com>
Date: Wed, 29 Jan 2025 05:42:22 +0530
Subject: [PATCH 03/15] reduce max-w

---
 src/components/Patient/PatientDetailsTab/PatientUsers.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Patient/PatientDetailsTab/PatientUsers.tsx b/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
index 33a0ed605cd..5a46979c50d 100644
--- a/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
+++ b/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
@@ -264,7 +264,7 @@ export const PatientUsers = (props: PatientProps) => {
                   <h3 className="text-sm font-medium text-gray-900">
                     {formatDisplayName(user)}
                   </h3>
-                  <p className="text-sm text-gray-500 truncate sm:max-w-xl lg:max-w-28">
+                  <p className="text-sm text-gray-500 truncate sm:max-w-xl lg:max-w-20">
                     <Tooltip>
                       <TooltipTrigger>{user.username}</TooltipTrigger>
                       <TooltipContent>

From 926cfa89500901f2730513af3f124e80fcacb82f Mon Sep 17 00:00:00 2001
From: rajku-dev <totoregex@gmail.com>
Date: Fri, 31 Jan 2025 16:26:08 +0530
Subject: [PATCH 04/15] fix trash icon alignment

---
 .../Patient/PatientDetailsTab/PatientUsers.tsx   | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/components/Patient/PatientDetailsTab/PatientUsers.tsx b/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
index 5a46979c50d..7cb966a4960 100644
--- a/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
+++ b/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
@@ -251,7 +251,7 @@ export const PatientUsers = (props: PatientProps) => {
         {users?.results.map((user) => (
           <div
             key={user.id}
-            className="rounded-lg border border-gray-200 bg-white p-4 shadow-sm"
+            className="rounded-lg border border-gray-200 bg-white p-4 shadow-sm relative"
           >
             <div className="flex items-start justify-between">
               <div className="flex items-start space-x-4">
@@ -261,8 +261,13 @@ export const PatientUsers = (props: PatientProps) => {
                   imageUrl={user.profile_picture_url}
                 />
                 <div>
-                  <h3 className="text-sm font-medium text-gray-900">
-                    {formatDisplayName(user)}
+                  <h3 className="text-sm font-medium text-gray-900 truncate sm:max-w-xl lg:max-w-20">
+                    <Tooltip>
+                      <TooltipTrigger>{formatDisplayName(user)}</TooltipTrigger>
+                      <TooltipContent>
+                        <p>{formatDisplayName(user)}</p>
+                      </TooltipContent>
+                    </Tooltip>
                   </h3>
                   <p className="text-sm text-gray-500 truncate sm:max-w-xl lg:max-w-20">
                     <Tooltip>
@@ -277,7 +282,10 @@ export const PatientUsers = (props: PatientProps) => {
               <AlertDialog>
                 <AlertDialogTrigger asChild>
                   <Button variant="ghost" size="icon">
-                    <CareIcon icon="l-trash" className="h-4 w-4" />
+                    <CareIcon
+                      icon="l-trash"
+                      className="h-4 w-4 absolute top-2 right-2"
+                    />
                   </Button>
                 </AlertDialogTrigger>
                 <AlertDialogContent>

From a8a1791cef5ccef4f00f8d53cfc29df8e57f0b3f Mon Sep 17 00:00:00 2001
From: rajku-dev <totoregex@gmail.com>
Date: Fri, 31 Jan 2025 18:08:40 +0530
Subject: [PATCH 05/15] make the card resposive for all viewports

---
 src/components/Patient/PatientDetailsTab/PatientUsers.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Patient/PatientDetailsTab/PatientUsers.tsx b/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
index 7cb966a4960..fee52ddef7b 100644
--- a/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
+++ b/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
@@ -241,7 +241,7 @@ export const PatientUsers = (props: PatientProps) => {
   const ManageUsers = () => {
     if (!users?.results?.length) {
       return (
-        <div className="h-full text-center space-y-2 mt-2 rounded-lg bg-white px-7 py-12 border border-secondary-300 text-lg text-secondary-600">
+        <div className="h-full space-y-2 mt-2 text-center rounded-lg bg-white px-7 py-12 border border-secondary-300 text-lg text-secondary-600">
           {t("no_user_assigned")}
         </div>
       );
@@ -261,7 +261,7 @@ export const PatientUsers = (props: PatientProps) => {
                   imageUrl={user.profile_picture_url}
                 />
                 <div>
-                  <h3 className="text-sm font-medium text-gray-900 truncate sm:max-w-xl lg:max-w-20">
+                  <h3 className="text-sm font-medium text-gray-900 truncate w-full max-w-32 sm:max-w-96 md:max-w-24 lg:max-w-28">
                     <Tooltip>
                       <TooltipTrigger>{formatDisplayName(user)}</TooltipTrigger>
                       <TooltipContent>
@@ -269,7 +269,7 @@ export const PatientUsers = (props: PatientProps) => {
                       </TooltipContent>
                     </Tooltip>
                   </h3>
-                  <p className="text-sm text-gray-500 truncate sm:max-w-xl lg:max-w-20">
+                  <p className="text-sm text-gray-500 truncate sm:max-w-96 md:max-w-24 lg:max-w-20">
                     <Tooltip>
                       <TooltipTrigger>{user.username}</TooltipTrigger>
                       <TooltipContent>

From d6eb604e8ab6c7d798b73d846bd996356ffb4b69 Mon Sep 17 00:00:00 2001
From: rajku-dev <totoregex@gmail.com>
Date: Mon, 3 Feb 2025 14:44:58 +0530
Subject: [PATCH 06/15] fix css

---
 src/components/Patient/PatientDetailsTab/PatientUsers.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Patient/PatientDetailsTab/PatientUsers.tsx b/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
index fee52ddef7b..fea85cf551c 100644
--- a/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
+++ b/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
@@ -269,7 +269,7 @@ export const PatientUsers = (props: PatientProps) => {
                       </TooltipContent>
                     </Tooltip>
                   </h3>
-                  <p className="text-sm text-gray-500 truncate sm:max-w-96 md:max-w-24 lg:max-w-20">
+                  <p className="text-sm text-gray-500 truncate sm:max-w-96 md:max-w-32 lg:max-w-32">
                     <Tooltip>
                       <TooltipTrigger>{user.username}</TooltipTrigger>
                       <TooltipContent>

From 82fc57c2fad3c266addd709ecbef0138f752d98a Mon Sep 17 00:00:00 2001
From: rajku-dev <totoregex@gmail.com>
Date: Tue, 4 Feb 2025 14:35:56 +0530
Subject: [PATCH 07/15] fix css

---
 .../Patient/PatientDetailsTab/PatientUsers.tsx       | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/Patient/PatientDetailsTab/PatientUsers.tsx b/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
index c8077cc9da4..e300005c02d 100644
--- a/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
+++ b/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
@@ -261,17 +261,21 @@ export const PatientUsers = (props: PatientProps) => {
                   imageUrl={user.profile_picture_url}
                 />
                 <div>
-                  <h3 className="text-sm font-medium text-gray-900 truncate w-full max-w-32 sm:max-w-96 md:max-w-24 lg:max-w-28">
+                  <h3>
                     <Tooltip>
-                      <TooltipTrigger>{formatDisplayName(user)}</TooltipTrigger>
+                      <TooltipTrigger className="text-sm font-medium text-gray-900 truncate max-w-32 sm:max-w-96 md:max-w-32 lg:max-w-28">
+                        {formatDisplayName(user)}
+                      </TooltipTrigger>
                       <TooltipContent>
                         <p>{formatDisplayName(user)}</p>
                       </TooltipContent>
                     </Tooltip>
                   </h3>
-                  <p className="text-sm text-gray-500 truncate sm:max-w-96 md:max-w-32 lg:max-w-32">
+                  <p>
                     <Tooltip>
-                      <TooltipTrigger>{user.username}</TooltipTrigger>
+                      <TooltipTrigger className="text-sm text-gray-500 truncate sm:max-w-96 md:max-w-32 lg:max-w-32">
+                        {user.username}
+                      </TooltipTrigger>
                       <TooltipContent>
                         <p>{user.username}</p>
                       </TooltipContent>

From aa885cbebd0a6cb38f5486ea6b8c1f03e36b35e0 Mon Sep 17 00:00:00 2001
From: rajku-dev <totoregex@gmail.com>
Date: Thu, 6 Feb 2025 06:20:24 +0530
Subject: [PATCH 08/15] set xl breakpoint css

---
 src/components/Patient/PatientDetailsTab/PatientUsers.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Patient/PatientDetailsTab/PatientUsers.tsx b/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
index a9ad4648706..4c078712fc8 100644
--- a/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
+++ b/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
@@ -264,7 +264,7 @@ export const PatientUsers = (props: PatientProps) => {
                 <div>
                   <h3>
                     <Tooltip>
-                      <TooltipTrigger className="text-sm font-medium text-gray-900 truncate max-w-32 sm:max-w-96 md:max-w-32 lg:max-w-28">
+                      <TooltipTrigger className="text-sm font-medium text-gray-900 truncate max-w-32 sm:max-w-96 md:max-w-32 lg:max-w-28 xl:max-w-40">
                         {formatDisplayName(user)}
                       </TooltipTrigger>
                       <TooltipContent>
@@ -274,7 +274,7 @@ export const PatientUsers = (props: PatientProps) => {
                   </h3>
                   <p>
                     <Tooltip>
-                      <TooltipTrigger className="text-sm text-gray-500 truncate sm:max-w-96 md:max-w-32 lg:max-w-32">
+                      <TooltipTrigger className="text-sm text-gray-500 truncate sm:max-w-96 md:max-w-32 lg:max-w-32 xl:max-w-40">
                         {user.username}
                       </TooltipTrigger>
                       <TooltipContent>

From d3a0e992806540d9d4aa491c79dd9a792e785fe3 Mon Sep 17 00:00:00 2001
From: rajku-dev <totoregex@gmail.com>
Date: Sat, 8 Feb 2025 02:58:40 +0530
Subject: [PATCH 09/15] use cn instead

---
 .../Patient/PatientDetailsTab/PatientUsers.tsx     | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Patient/PatientDetailsTab/PatientUsers.tsx b/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
index 4c078712fc8..0e5d9863c8d 100644
--- a/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
+++ b/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
@@ -3,6 +3,8 @@ import { t } from "i18next";
 import { useState } from "react";
 import { toast } from "sonner";
 
+import { cn } from "@/lib/utils";
+
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
 import {
@@ -16,7 +18,7 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
+import { Button, buttonVariants } from "@/components/ui/button";
 import {
   Select,
   SelectContent,
@@ -262,7 +264,7 @@ export const PatientUsers = (props: PatientProps) => {
                   imageUrl={user.profile_picture_url}
                 />
                 <div>
-                  <h3>
+                  <h3 className="inline-flex">
                     <Tooltip>
                       <TooltipTrigger className="text-sm font-medium text-gray-900 truncate max-w-32 sm:max-w-96 md:max-w-32 lg:max-w-28 xl:max-w-40">
                         {formatDisplayName(user)}
@@ -290,11 +292,9 @@ export const PatientUsers = (props: PatientProps) => {
                     variant="ghost"
                     size="icon"
                     data-cy="patient-user-remove-button"
+                    className="absolute top-0 right-0"
                   >
-                    <CareIcon
-                      icon="l-trash"
-                      className="h-4 w-4 absolute top-2 right-2"
-                    />
+                    <CareIcon icon="l-trash" />
                   </Button>
                 </AlertDialogTrigger>
                 <AlertDialogContent>
@@ -311,7 +311,7 @@ export const PatientUsers = (props: PatientProps) => {
                     <AlertDialogAction
                       data-cy="patient-user-remove-confirm-button"
                       onClick={() => removeUser(user.id)}
-                      className="bg-red-500 text-white hover:bg-red-600"
+                      className={cn(buttonVariants({ variant: "destructive" }))}
                     >
                       {t("remove")}
                     </AlertDialogAction>

From 19acd6f6b33813f6a4a086c4b28fe2fbe518a3cf Mon Sep 17 00:00:00 2001
From: rajku-dev <totoregex@gmail.com>
Date: Sat, 8 Feb 2025 03:03:14 +0530
Subject: [PATCH 10/15] adjust xl max-w

---
 src/components/Patient/PatientDetailsTab/PatientUsers.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Patient/PatientDetailsTab/PatientUsers.tsx b/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
index 0e5d9863c8d..f31c54fee47 100644
--- a/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
+++ b/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
@@ -266,7 +266,7 @@ export const PatientUsers = (props: PatientProps) => {
                 <div>
                   <h3 className="inline-flex">
                     <Tooltip>
-                      <TooltipTrigger className="text-sm font-medium text-gray-900 truncate max-w-32 sm:max-w-96 md:max-w-32 lg:max-w-28 xl:max-w-40">
+                      <TooltipTrigger className="text-sm font-medium text-gray-900 truncate max-w-32 sm:max-w-96 md:max-w-32 lg:max-w-28 xl:max-w-36">
                         {formatDisplayName(user)}
                       </TooltipTrigger>
                       <TooltipContent>
@@ -276,7 +276,7 @@ export const PatientUsers = (props: PatientProps) => {
                   </h3>
                   <p>
                     <Tooltip>
-                      <TooltipTrigger className="text-sm text-gray-500 truncate sm:max-w-96 md:max-w-32 lg:max-w-32 xl:max-w-40">
+                      <TooltipTrigger className="text-sm text-gray-500 truncate sm:max-w-96 md:max-w-32 lg:max-w-32 xl:max-w-36">
                         {user.username}
                       </TooltipTrigger>
                       <TooltipContent>

From 9633864c05deb1c81587893cfa0b74264cf62a2b Mon Sep 17 00:00:00 2001
From: rajku-dev <totoregex@gmail.com>
Date: Sat, 8 Feb 2025 03:55:50 +0530
Subject: [PATCH 11/15] modify i18n trasnlation

---
 public/locale/en.json                               |  2 +-
 .../Patient/PatientDetailsTab/PatientUsers.tsx      | 13 ++++++++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/public/locale/en.json b/public/locale/en.json
index 7a455f5a214..536be8e4be1 100644
--- a/public/locale/en.json
+++ b/public/locale/en.json
@@ -388,7 +388,7 @@
   "are_you_still_watching": "Are you still watching?",
   "are_you_sure_want_to_delete": "Are you sure you want to delete {{name}}?",
   "are_you_sure_want_to_delete_this_record": "Are you sure want to delete this record?",
-  "are_you_sure_want_to_remove": "Are you sure you want to remove {{name}} from the patient? This action cannot be undone",
+  "are_you_sure_want_to_remove": "Are you sure you want to remove <strong>{{name}}</strong> from the patient? This action cannot be undone",
   "ari": "ARI - Acute Respiratory illness",
   "arrived": "Arrived",
   "as_needed_prn": "As Needed / PRN",
diff --git a/src/components/Patient/PatientDetailsTab/PatientUsers.tsx b/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
index f31c54fee47..fa315a14175 100644
--- a/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
+++ b/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
@@ -1,6 +1,7 @@
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { t } from "i18next";
 import { useState } from "react";
+import { Trans } from "react-i18next";
 import { toast } from "sonner";
 
 import { cn } from "@/lib/utils";
@@ -301,9 +302,15 @@ export const PatientUsers = (props: PatientProps) => {
                   <AlertDialogHeader>
                     <AlertDialogTitle>{t("remove_user")}</AlertDialogTitle>
                     <AlertDialogDescription>
-                      {t("are_you_sure_want_to_remove", {
-                        name: formatDisplayName(user),
-                      })}
+                      <Trans
+                        i18nKey="are_you_sure_want_to_remove"
+                        values={{ name: formatDisplayName(user) }}
+                        components={{
+                          strong: (
+                            <strong className="inline-block align-middle truncate max-w-32 sm:max-w-96 md:max-w-32 lg:max-w-28 xl:max-w-36" />
+                          ),
+                        }}
+                      />
                     </AlertDialogDescription>
                   </AlertDialogHeader>
                   <AlertDialogFooter>

From e306e5ce7d062e632ef201f1f0c79ba8170347a3 Mon Sep 17 00:00:00 2001
From: rajku-dev <totoregex@gmail.com>
Date: Mon, 10 Feb 2025 14:42:46 +0530
Subject: [PATCH 12/15] fix text alignment

---
 src/components/Patient/PatientDetailsTab/PatientUsers.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Patient/PatientDetailsTab/PatientUsers.tsx b/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
index fa315a14175..e1d21c1fba9 100644
--- a/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
+++ b/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
@@ -307,7 +307,7 @@ export const PatientUsers = (props: PatientProps) => {
                         values={{ name: formatDisplayName(user) }}
                         components={{
                           strong: (
-                            <strong className="inline-block align-middle truncate max-w-32 sm:max-w-96 md:max-w-32 lg:max-w-28 xl:max-w-36" />
+                            <strong className="inline-block align-bottom truncate max-w-32 sm:max-w-96 md:max-w-32 lg:max-w-28 xl:max-w-36" />
                           ),
                         }}
                       />

From cabc722dbce323eb7a7e5970b11a36b4f32ffbea Mon Sep 17 00:00:00 2001
From: rajku-dev <totoregex@gmail.com>
Date: Tue, 11 Feb 2025 13:48:50 +0530
Subject: [PATCH 13/15] use ToolTipComponent instead

---
 .../PatientDetailsTab/PatientUsers.tsx        | 28 ++++++-------------
 1 file changed, 9 insertions(+), 19 deletions(-)

diff --git a/src/components/Patient/PatientDetailsTab/PatientUsers.tsx b/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
index e1d21c1fba9..d270afd6fda 100644
--- a/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
+++ b/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
@@ -35,11 +35,7 @@ import {
   SheetTitle,
   SheetTrigger,
 } from "@/components/ui/sheet";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
+import { TooltipComponent } from "@/components/ui/tooltip";
 
 import { Avatar } from "@/components/Common/Avatar";
 import UserSelector from "@/components/Common/UserSelector";
@@ -266,24 +262,18 @@ export const PatientUsers = (props: PatientProps) => {
                 />
                 <div>
                   <h3 className="inline-flex">
-                    <Tooltip>
-                      <TooltipTrigger className="text-sm font-medium text-gray-900 truncate max-w-32 sm:max-w-96 md:max-w-32 lg:max-w-28 xl:max-w-36">
+                    <TooltipComponent content={formatDisplayName(user)}>
+                      <p className="text-sm font-medium text-gray-900 truncate max-w-32 sm:max-w-96 md:max-w-32 lg:max-w-28 xl:max-w-36">
                         {formatDisplayName(user)}
-                      </TooltipTrigger>
-                      <TooltipContent>
-                        <p>{formatDisplayName(user)}</p>
-                      </TooltipContent>
-                    </Tooltip>
+                      </p>
+                    </TooltipComponent>
                   </h3>
                   <p>
-                    <Tooltip>
-                      <TooltipTrigger className="text-sm text-gray-500 truncate sm:max-w-96 md:max-w-32 lg:max-w-32 xl:max-w-36">
+                    <TooltipComponent content={user.username}>
+                      <p className="text-sm text-gray-500 truncate sm:max-w-96 md:max-w-32 lg:max-w-32 xl:max-w-36">
                         {user.username}
-                      </TooltipTrigger>
-                      <TooltipContent>
-                        <p>{user.username}</p>
-                      </TooltipContent>
-                    </Tooltip>
+                      </p>
+                    </TooltipComponent>
                   </p>
                 </div>
               </div>

From 70774fbd2dad8078dd62a499d4cee2ce39ec03d9 Mon Sep 17 00:00:00 2001
From: rajku-dev <totoregex@gmail.com>
Date: Tue, 11 Feb 2025 15:03:38 +0530
Subject: [PATCH 14/15] fix name overflow in AddUserSheet and UserSelector

---
 src/components/Common/UserSelector.tsx                    | 7 ++++++-
 src/components/Patient/PatientDetailsTab/PatientUsers.tsx | 8 +++++---
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/components/Common/UserSelector.tsx b/src/components/Common/UserSelector.tsx
index ff2221d5561..f3cd668ca3e 100644
--- a/src/components/Common/UserSelector.tsx
+++ b/src/components/Common/UserSelector.tsx
@@ -18,6 +18,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
+import { TooltipComponent } from "@/components/ui/tooltip";
 
 import { Avatar } from "@/components/Common/Avatar";
 
@@ -69,7 +70,11 @@ export default function UserSelector({
                 name={formatName(selected)}
                 className="size-6 rounded-full"
               />
-              <span>{formatName(selected)}</span>
+              <TooltipComponent content={formatName(selected)}>
+                <p className="font-medium text-gray-900 truncate max-w-56 sm:max-w-48 md:max-w-64 lg:max-w-64 xl:max-w-36">
+                  {formatName(selected)}
+                </p>
+              </TooltipComponent>
             </div>
           ) : (
             <span>{placeholder || t("select_user")}</span>
diff --git a/src/components/Patient/PatientDetailsTab/PatientUsers.tsx b/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
index d270afd6fda..4e781735327 100644
--- a/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
+++ b/src/components/Patient/PatientDetailsTab/PatientUsers.tsx
@@ -137,9 +137,11 @@ function AddUserSheet({ patientId }: AddUserSheetProps) {
                     className="h-12 w-12"
                   />
                   <div className="flex flex-col flex-1">
-                    <span className="font-medium text-lg">
-                      {formatDisplayName(selectedUser)}
-                    </span>
+                    <TooltipComponent content={formatDisplayName(selectedUser)}>
+                      <p className="font-medium text-gray-900 truncate max-w-56 sm:max-w-48 md:max-w-64 lg:max-w-64 xl:max-w-36">
+                        {formatDisplayName(selectedUser)}
+                      </p>
+                    </TooltipComponent>
                     <span className="text-sm text-gray-500">
                       {selectedUser.email}
                     </span>

From 571cfc91a3edb0bdea36f79ac02348ec048203ed Mon Sep 17 00:00:00 2001
From: rajku-dev <totoregex@gmail.com>
Date: Wed, 12 Feb 2025 15:58:00 +0530
Subject: [PATCH 15/15] reposition tooltip to bottom

---
 src/components/Common/UserSelector.tsx | 2 +-
 src/components/ui/tooltip.tsx          | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/Common/UserSelector.tsx b/src/components/Common/UserSelector.tsx
index f3cd668ca3e..5c898e336da 100644
--- a/src/components/Common/UserSelector.tsx
+++ b/src/components/Common/UserSelector.tsx
@@ -70,7 +70,7 @@ export default function UserSelector({
                 name={formatName(selected)}
                 className="size-6 rounded-full"
               />
-              <TooltipComponent content={formatName(selected)}>
+              <TooltipComponent content={formatName(selected)} side="bottom">
                 <p className="font-medium text-gray-900 truncate max-w-56 sm:max-w-48 md:max-w-64 lg:max-w-64 xl:max-w-36">
                   {formatName(selected)}
                 </p>
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
index 536392830da..3bf12b3407f 100644
--- a/src/components/ui/tooltip.tsx
+++ b/src/components/ui/tooltip.tsx
@@ -30,7 +30,7 @@ TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 const TooltipComponent = React.forwardRef<
   React.ElementRef<typeof TooltipContent>,
   React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ children, content, sideOffset = 4, className }, ref) => {
+>(({ children, content, sideOffset = 4, className, side }, ref) => {
   const [open, setOpen] = React.useState(false);
   return (
     <TooltipProvider>
@@ -45,6 +45,7 @@ const TooltipComponent = React.forwardRef<
             "z-50 overflow-hidden rounded-md bg-gray-900 px-3 py-1.5 text-xs text-gray-50 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:bg-gray-50 dark:text-gray-900",
             className,
           )}
+          side={side}
         >
           {content}
         </TooltipContent>