From 387c65a29956f218672f26a904fe5ba200a9ac2e Mon Sep 17 00:00:00 2001
From: alanansari <ansarialan31@gmail.com>
Date: Fri, 23 Feb 2024 17:44:42 +0530
Subject: [PATCH 1/3] fix: overflow of fields in the user management cards

---
 src/Components/Users/ManageUsers.tsx | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/Components/Users/ManageUsers.tsx b/src/Components/Users/ManageUsers.tsx
index 1a39b57ec53..eb5db891b57 100644
--- a/src/Components/Users/ManageUsers.tsx
+++ b/src/Components/Users/ManageUsers.tsx
@@ -255,7 +255,11 @@ export default function ManageUsers() {
                   {user.user_type && (
                     <div className="col-span-1">
                       <UserDetails id="role" title="Role">
-                        <div className="break-all font-semibold">
+                        <div
+                          className="overflow-hidden font-semibold"
+                          style={{ textOverflow: "ellipsis" }}
+                          title={user.user_type}
+                        >
                           {user.user_type}
                         </div>
                       </UserDetails>
@@ -264,7 +268,11 @@ export default function ManageUsers() {
                   {user.district_object && (
                     <div className="col-span-1">
                       <UserDetails id="district" title="District">
-                        <div className="font-semibold">
+                        <div
+                          className="overflow-hidden font-semibold"
+                          style={{ textOverflow: "ellipsis" }}
+                          title={user.district_object.name}
+                        >
                           {user.district_object.name}
                         </div>
                       </UserDetails>
@@ -336,7 +344,11 @@ export default function ManageUsers() {
                   {user.created_by && (
                     <div className="col-span-1">
                       <UserDetails id="created_by" title="Created by">
-                        <div className="break-all font-semibold">
+                        <div
+                          className="overflow-hidden font-semibold"
+                          style={{ textOverflow: "ellipsis" }}
+                          title={user.created_by}
+                        >
                           {user.created_by}
                         </div>
                       </UserDetails>

From aceddfd2cf126c0a28d362068fdbbd5c0bfe02bc Mon Sep 17 00:00:00 2001
From: alanansari <ansarialan31@gmail.com>
Date: Fri, 23 Feb 2024 19:13:24 +0530
Subject: [PATCH 2/3] refactored code

---
 src/Components/Common/UserDetailsComponet.tsx | 25 ++++++++++++++
 src/Components/Users/ManageUsers.tsx          | 33 +++++++------------
 2 files changed, 36 insertions(+), 22 deletions(-)
 create mode 100644 src/Components/Common/UserDetailsComponet.tsx

diff --git a/src/Components/Common/UserDetailsComponet.tsx b/src/Components/Common/UserDetailsComponet.tsx
new file mode 100644
index 00000000000..fe84e50165c
--- /dev/null
+++ b/src/Components/Common/UserDetailsComponet.tsx
@@ -0,0 +1,25 @@
+import UserDetails from "./UserDetails";
+
+const UserDetailComponent = ({
+  id,
+  title,
+  value,
+}: {
+  id: string;
+  title: string;
+  value: string;
+}) => (
+  <div className="col-span-1">
+    <UserDetails id={id} title={title}>
+      <div
+        className="overflow-hidden font-semibold"
+        style={{ textOverflow: "ellipsis" }}
+        title={value}
+      >
+        {value}
+      </div>
+    </UserDetails>
+  </div>
+);
+
+export default UserDetailComponent;
diff --git a/src/Components/Users/ManageUsers.tsx b/src/Components/Users/ManageUsers.tsx
index eb5db891b57..30cf6177f5c 100644
--- a/src/Components/Users/ManageUsers.tsx
+++ b/src/Components/Users/ManageUsers.tsx
@@ -14,6 +14,7 @@ import { USER_TYPES } from "../../Common/constants";
 import UnlinkFacilityDialog from "./UnlinkFacilityDialog";
 import UserDeleteDialog from "./UserDeleteDialog";
 import UserDetails from "../Common/UserDetails";
+import UserDetailComponent from "../Common/UserDetailsComponet.js";
 import UserFilter from "./UserFilter";
 import {
   classNames,
@@ -253,30 +254,18 @@ export default function ManageUsers() {
                   } gap-2 md:grid md:grid-cols-2`}
                 >
                   {user.user_type && (
-                    <div className="col-span-1">
-                      <UserDetails id="role" title="Role">
-                        <div
-                          className="overflow-hidden font-semibold"
-                          style={{ textOverflow: "ellipsis" }}
-                          title={user.user_type}
-                        >
-                          {user.user_type}
-                        </div>
-                      </UserDetails>
-                    </div>
+                    <UserDetailComponent
+                      id="role"
+                      title="Role"
+                      value={user.user_type}
+                    />
                   )}
                   {user.district_object && (
-                    <div className="col-span-1">
-                      <UserDetails id="district" title="District">
-                        <div
-                          className="overflow-hidden font-semibold"
-                          style={{ textOverflow: "ellipsis" }}
-                          title={user.district_object.name}
-                        >
-                          {user.district_object.name}
-                        </div>
-                      </UserDetails>
-                    </div>
+                    <UserDetailComponent
+                      id="district"
+                      title="District"
+                      value={user.district_object.name}
+                    />
                   )}
                   {user.user_type === "Doctor" && (
                     <>

From 3a28a4350dfb256c21c3c8ed6ac67db7da3124c7 Mon Sep 17 00:00:00 2001
From: alanansari <ansarialan31@gmail.com>
Date: Sat, 24 Feb 2024 17:29:41 +0530
Subject: [PATCH 3/3] UPDATE: inline styles to tailwind

---
 src/Components/Common/UserDetailsComponet.tsx | 10 ++++------
 src/Components/Users/ManageUsers.tsx          | 13 +++++++------
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/Components/Common/UserDetailsComponet.tsx b/src/Components/Common/UserDetailsComponet.tsx
index fe84e50165c..44aff851917 100644
--- a/src/Components/Common/UserDetailsComponet.tsx
+++ b/src/Components/Common/UserDetailsComponet.tsx
@@ -11,12 +11,10 @@ const UserDetailComponent = ({
 }) => (
   <div className="col-span-1">
     <UserDetails id={id} title={title}>
-      <div
-        className="overflow-hidden font-semibold"
-        style={{ textOverflow: "ellipsis" }}
-        title={value}
-      >
-        {value}
+      <div className="overflow-hidden">
+        <div className="truncate font-semibold" title={value}>
+          {value}
+        </div>
       </div>
     </UserDetails>
   </div>
diff --git a/src/Components/Users/ManageUsers.tsx b/src/Components/Users/ManageUsers.tsx
index 30cf6177f5c..391e38386f4 100644
--- a/src/Components/Users/ManageUsers.tsx
+++ b/src/Components/Users/ManageUsers.tsx
@@ -333,12 +333,13 @@ export default function ManageUsers() {
                   {user.created_by && (
                     <div className="col-span-1">
                       <UserDetails id="created_by" title="Created by">
-                        <div
-                          className="overflow-hidden font-semibold"
-                          style={{ textOverflow: "ellipsis" }}
-                          title={user.created_by}
-                        >
-                          {user.created_by}
+                        <div className="overflow-hidden">
+                          <div
+                            className="truncate font-semibold"
+                            title={user.created_by}
+                          >
+                            {user.created_by}
+                          </div>
                         </div>
                       </UserDetails>
                     </div>