From f94886d15070e8f3d855eb46515a0126f95c8667 Mon Sep 17 00:00:00 2001
From: David Pham <tuananh200898@gmail.com>
Date: Mon, 23 Oct 2023 17:42:22 +0700
Subject: [PATCH] Fix issue 2130: text overflow on setting member page (#2192)

---
 .../modules/workspace/components/WorkspaceMemberCard.tsx  | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/front/src/modules/workspace/components/WorkspaceMemberCard.tsx b/front/src/modules/workspace/components/WorkspaceMemberCard.tsx
index 040713e9b..94f15a341 100644
--- a/front/src/modules/workspace/components/WorkspaceMemberCard.tsx
+++ b/front/src/modules/workspace/components/WorkspaceMemberCard.tsx
@@ -1,5 +1,6 @@
 import styled from '@emotion/styled';
 
+import { OverflowingTextWithTooltip } from '@/ui/display/tooltip/OverflowingTextWithTooltip';
 import { Avatar } from '@/users/components/Avatar';
 import { User } from '~/generated/graphql';
 
@@ -20,10 +21,7 @@ const StyledContent = styled.div`
   flex-direction: column;
   justify-content: center;
   margin-left: ${({ theme }) => theme.spacing(3)};
-`;
-
-const StyledNameText = styled.span`
-  color: ${({ theme }) => theme.font.color.primary};
+  overflow: auto;
 `;
 
 const StyledEmailText = styled.span`
@@ -53,7 +51,7 @@ export const WorkspaceMemberCard = ({
       size="xl"
     />
     <StyledContent>
-      <StyledNameText>{workspaceMember.user.displayName}</StyledNameText>
+      <OverflowingTextWithTooltip text={workspaceMember.user.displayName} />
       <StyledEmailText>{workspaceMember.user.email}</StyledEmailText>
     </StyledContent>