[WEB-538] style: fix invite member icons in dropdown shrink when name…

… is too large. (#3776)
makeplane · Feb 23, 2024 · 5c64933 · 5c64933
1 parent 9c50ee3
commit 5c64933
Showing 1 changed file with 8 additions and 4 deletions.
diff --git 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>
       ),
     };