From 8ff07807f9ae738c5bb748510faffa91be49e1fe Mon Sep 17 00:00:00 2001
From: sean-brydon <55134778+sean-brydon@users.noreply.github.com>
Date: Tue, 12 Sep 2023 22:46:18 +0100
Subject: [PATCH] Fix overflow (#11320)

Co-authored-by: Peer Richelsen <peeroke@gmail.com>
---
 .../features/ee/teams/components/AddNewTeamMembers.tsx    | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/features/ee/teams/components/AddNewTeamMembers.tsx b/packages/features/ee/teams/components/AddNewTeamMembers.tsx
index c1c7902fa5..942cd147e8 100644
--- a/packages/features/ee/teams/components/AddNewTeamMembers.tsx
+++ b/packages/features/ee/teams/components/AddNewTeamMembers.tsx
@@ -240,9 +240,9 @@ const PendingMemberItem = (props: { member: TeamMember; index: number; teamId: n
         index !== 0 && "border-subtle border-t"
       )}
       data-testid="pending-member-item">
-      <div className="flex space-x-2 rtl:space-x-reverse">
+      <div className="mr-4 flex max-w-full space-x-2 overflow-hidden rtl:space-x-reverse">
         <Avatar size="mdLg" imageSrc={bookerUrl + "/" + member.username + "/avatar.png"} alt="owner-avatar" />
-        <div>
+        <div className="max-w-full overflow-hidden">
           <div className="flex space-x-1">
             <p>{member.name || member.email || t("team_member")}</p>
             {/* Assume that the first member of the team is the creator */}
@@ -252,9 +252,9 @@ const PendingMemberItem = (props: { member: TeamMember; index: number; teamId: n
             {member.role === "ADMIN" && <Badge variant="default">{t("admin")}</Badge>}
           </div>
           {member.username ? (
-            <p className="text-default">{`${WEBAPP_URL}/${member.username}`}</p>
+            <p className="text-default truncate">{`${WEBAPP_URL}/${member.username}`}</p>
           ) : (
-            <p className="text-default">{t("not_on_cal", { appName: APP_NAME })}</p>
+            <p className="text-default truncate">{t("not_on_cal", { appName: APP_NAME })}</p>
           )}
         </div>
       </div>