Merge pull request #11341 from brja/fix/link-overflow

fix(frontend): Fixed overflow bug of name and email on EntitiyMembersListCard component

.changeset/dirty-ducks-suffer.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-org': patch
+---
+
+Fixed overflow bug of name and email on EntitiyMembersListCard component which can occur on specific 'screen width' + ’character length' combinations

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>