Fix PatientUsers card overflow and Remove-button background

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";
@@ -236,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 text-center 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>
       );
@@ -246,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">
@@ -256,16 +261,31 @@ 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 w-full max-w-32 sm:max-w-96 md:max-w-24 lg:max-w-28">
+                    <Tooltip>
+                      <TooltipTrigger>{formatDisplayName(user)}</TooltipTrigger>
+                      <TooltipContent>
+                        <p>{formatDisplayName(user)}</p>
+                      </TooltipContent>
+                    </Tooltip>
                   </h3>
-                  <p className="text-sm text-gray-500">{user.username}</p>
+                  <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>
+                        <p>{user.username}</p>
+                      </TooltipContent>
+                    </Tooltip>
+                  </p>
                 </div>
               </div>
               <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>
@@ -281,7 +301,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>