From 4733f6766ece1c76c0fe0273b05560ffaca2926b Mon Sep 17 00:00:00 2001
From: Jan Brink <jan.brink@lego.com>
Date: Thu, 5 May 2022 12:56:52 +0200
Subject: [PATCH] fix: replace email overflow by either showing email with
 ellipsis or showing full wrapping email on mouse over

Signed-off-by: Jan Brink <jan.brink@lego.com>
---
 .../Group/MembersList/MembersListCard.tsx     | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx
index 14f02c189f..7e5b683bf1 100644
--- a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx
+++ b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx
@@ -59,6 +59,17 @@ const useStyles = makeStyles((theme: Theme) =>
       flex: '1',
       minWidth: '0px',
     },
+    email: {
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      display: 'inline-block',
+      maxWidth: '100%',
+      '&:hover': {
+        overflow: 'visible',
+        whiteSpace: 'normal',
+      },
+    },
   }),
 );
 
@@ -88,7 +99,13 @@ const MemberComponent = (props: { member: UserEntity }) => {
               top: '-2rem',
             }}
           />
-          <Box pt={2} textAlign="center">
+          <Box
+            pt={2}
+            sx={{
+              maxWidth: '100%',
+            }}
+            textAlign="center"
+          >
             <Typography variant="h5">
               <Link
                 to={generatePath(
@@ -100,7 +117,9 @@ const MemberComponent = (props: { member: UserEntity }) => {
               </Link>
             </Typography>
             {profile?.email && (
-              <Link to={`mailto:${profile.email}`}>{profile.email}</Link>
+              <Link className={classes.email} to={`mailto:${profile.email}`}>
+                {profile.email}
+              </Link>
             )}
             {description && (
               <Typography variant="subtitle2">{description}</Typography>