From 5c64933927f769d237f5eba0088f0454d2aa5f13 Mon Sep 17 00:00:00 2001
From: Prateek Shourya <prateekshourya29@gmail.com>
Date: Fri, 23 Feb 2024 18:47:15 +0530
Subject: [PATCH] [WEB-538] style: fix invite member icons in dropdown shrink
 when name is too large. (#3776)

---
 .../project/send-project-invitation-modal.tsx        | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/web/components/project/send-project-invitation-modal.tsx b/web/components/project/send-project-invitation-modal.tsx
index 7c02ce8d0..ef7913fb0 100644
--- a/web/components/project/send-project-invitation-modal.tsx
+++ b/web/components/project/send-project-invitation-modal.tsx
@@ -148,10 +148,14 @@ export const SendProjectInvitationModal: React.FC<Props> = observer((props) => {
         memberDetails?.member.last_name
       } ${memberDetails?.member.display_name.toLowerCase()}`,
       content: (
-        <div className="flex items-center gap-2">
-          <Avatar name={memberDetails?.member.display_name} src={memberDetails?.member.avatar} />
-          {memberDetails?.member.display_name} (
-          {memberDetails?.member.first_name + " " + memberDetails?.member.last_name})
+        <div className="flex w-full items-center gap-2">
+          <div className="flex-shrink-0 pt-0.5">
+            <Avatar name={memberDetails?.member.display_name} src={memberDetails?.member.avatar} />
+          </div>
+          <div className="truncate">
+            {memberDetails?.member.display_name} (
+            {memberDetails?.member.first_name + " " + memberDetails?.member.last_name})
+          </div>
         </div>
       ),
     };