Fix PatientUsers card overflow and Remove-btn bg

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>