From 5cee4f71caba40e2758f1f9a458178d5ec274ebb Mon Sep 17 00:00:00 2001
From: Claire Casey <ccasey@spotify.com>
Date: Tue, 14 Feb 2023 14:45:56 -0500
Subject: [PATCH] add styling to handle overflow text on ownership and members
 card

Signed-off-by: Claire Casey <ccasey@spotify.com>
---
 .../Cards/Group/MembersList/MembersListCard.tsx    | 11 +++++++----
 .../Cards/OwnershipCard/ComponentsGrid.tsx         | 14 +++++++++++---
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx
index 7e5b683bf1..65c3144d30 100644
--- a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx
+++ b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx
@@ -59,15 +59,14 @@ const useStyles = makeStyles((theme: Theme) =>
       flex: '1',
       minWidth: '0px',
     },
-    email: {
+    overflowingText: {
       overflow: 'hidden',
-      whiteSpace: 'nowrap',
       textOverflow: 'ellipsis',
       display: 'inline-block',
       maxWidth: '100%',
       '&:hover': {
         overflow: 'visible',
-        whiteSpace: 'normal',
+        wordBreak: 'break-word',
       },
     },
   }),
@@ -108,6 +107,7 @@ const MemberComponent = (props: { member: UserEntity }) => {
           >
             <Typography variant="h5">
               <Link
+                className={classes.overflowingText}
                 to={generatePath(
                   `/catalog/:namespace/user/${metaName}`,
                   entityRouteParams(props.member),
@@ -117,7 +117,10 @@ const MemberComponent = (props: { member: UserEntity }) => {
               </Link>
             </Typography>
             {profile?.email && (
-              <Link className={classes.email} to={`mailto:${profile.email}`}>
+              <Link
+                className={classes.overflowingText}
+                to={`mailto:${profile.email}`}
+              >
                 {profile.email}
               </Link>
             )}
diff --git a/plugins/org/src/components/Cards/OwnershipCard/ComponentsGrid.tsx b/plugins/org/src/components/Cards/OwnershipCard/ComponentsGrid.tsx
index 567c7ad3bc..edd8cc126f 100644
--- a/plugins/org/src/components/Cards/OwnershipCard/ComponentsGrid.tsx
+++ b/plugins/org/src/components/Cards/OwnershipCard/ComponentsGrid.tsx
@@ -44,8 +44,16 @@ const useStyles = makeStyles((theme: BackstageTheme) =>
       },
       height: '100%',
     },
-    bold: {
+    title: {
       fontWeight: theme.typography.fontWeightBold,
+      textAlign: 'center',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      maxWidth: '100%',
+      '&:hover': {
+        overflow: 'visible',
+        wordBreak: 'break-word',
+      },
     },
     entityTypeBox: {
       background: (props: { type: string }) =>
@@ -77,10 +85,10 @@ const EntityCountTile = ({
         flexDirection="column"
         alignItems="center"
       >
-        <Typography className={classes.bold} variant="h6">
+        <Typography className={classes.title} variant="h6">
           {counter}
         </Typography>
-        <Typography className={classes.bold} variant="h6">
+        <Typography className={classes.title} variant="h6">
           {pluralize(rawTitle.toLocaleUpperCase('en-US'), counter)}
         </Typography>
         {type && <Typography variant="subtitle1">{kind}</Typography>}