Client: EditGroupMembersDialog: Add email to member row

packages/client/src/components/dialogs/EditGroupMembersDialog/sub-components/GroupMember/index.styled.ts

@@ -42,11 +42,15 @@ export const GroupMember = styled.div<{ isExpect: boolean }>`
     overflow: auto;
   }
 
-  .name-wrapper,
+  .info,
   .role-email {
     display: flex;
   }
 
+  .info {
+    flex-direction: column;
+  }
+
   .name {
     font-weight: 600;
     font-size: 14px;
@@ -59,6 +63,15 @@ export const GroupMember = styled.div<{ isExpect: boolean }>`
       props.isExpect && `color: ${props.theme.infoPanel.members.isExpectName}`};
   }
 
+  .email {
+    color: ${({ theme }) => theme.sideBarRow.metaDataColor};
+    font-size: 12px;
+    line-height: 16px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   .me-label {
     font-weight: 600;
     font-size: 14px;

packages/client/src/components/dialogs/EditGroupMembersDialog/sub-components/GroupMember/index.tsx

@@ -131,13 +131,17 @@ const GroupMember = ({ member, infoPanelSelection }: GroupMemberProps) => {
       />
 
       <div className="user_body-wrapper">
-        <div className="name-wrapper">
+        <div className="info">
           <Text
             className="name"
             data-tooltip-id={`userTooltip_${Math.random()}`}
+            noSelect
           >
             {decode(user.displayName)}
           </Text>
+          <Text className="email" noSelect>
+            {user.email}
+          </Text>
         </div>
       </div>