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 1/6] 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 2/6] 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 3/6] 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 4/6] 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 5/6] 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 6/6] 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>