linagora#1960 Add ellipsis in member channel row

stephanevieira75 · Mar 11, 2022 · 02d35fe · 02d35fe
1 parent fda0c03
commit 02d35fe
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 4 deletions.
diff --git a/twake/frontend/src/app/views/client/channels-bar/Parts/Header/MemberChannelRow.scss b/twake/frontend/src/app/views/client/channels-bar/Parts/Header/MemberChannelRow.scss
@@ -33,4 +33,8 @@
       color: var(--white) !important;
     }
   }
+
+  .username-col {
+    display: flex;
+  }
 }
diff --git a/twake/frontend/src/app/views/client/channels-bar/Parts/Header/MemberChannelRow.tsx b/twake/frontend/src/app/views/client/channels-bar/Parts/Header/MemberChannelRow.tsx
@@ -5,7 +5,6 @@ import { Mail, PlusCircle, Trash } from 'react-feather';
 
 import { getUserParts } from 'app/components/member/user-parts';
 import Languages from 'app/features/global/services/languages-service';
-import './MemberChannelRow.scss';
 import Menu from 'app/components/menus/menu';
 import Icon from 'app/components/icon/icon';
 import AccessRightsService from 'app/features/workspace-members/services/workspace-members-access-rights-service';
@@ -19,6 +18,8 @@ import { useChannelMembers } from 'app/features/channel-members/hooks/use-channe
 import { usePendingEmails } from 'app/features/pending-emails/hooks/use-pending-emails';
 import PendingEmailsAPIClient from 'app/features/pending-emails/api/pending-emails-api-client';
 
+import './MemberChannelRow.scss';
+
 const { Text } = Typography;
 
 type Props = {
@@ -211,11 +212,13 @@ const MemberChannelRow = (props: Props): JSX.Element => {
       className={`pending-email ${selected ? 'selected' : ''}`}
     >
       <Col className="small-x-margin">{avatar}</Col>
-      <Col flex={4}>
-        <Text strong className="pending-email-text">
+      <Col flex={4} className="username-col">
+        <Text strong className="pending-email-text small-right-margin">
           {name}
         </Text>{' '}
-        @{users[0]?.username}
+        <Text ellipsis={true} style={{ maxWidth: 200 }}>
+          @{users[0]?.username}
+        </Text>
       </Col>
       <Col>
         {props.userId === currentUserId && (