refactor to use OverflowTooltip component

Signed-off-by: Claire Casey <ccasey@spotify.com>

.changeset/selfish-hats-wait.md

@@ -2,4 +2,4 @@
 '@backstage/plugin-org': patch
 ---
 
-Add styling to the MembersListCard and ComponentsGrid to handle overflow text.
+Add styling to the `MembersListCard` and `ComponentsGrid` to handle overflow text.

plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx

@@ -44,6 +44,7 @@ import {
   Progress,
   ResponseErrorPanel,
   Link,
+  OverflowTooltip,
 } from '@backstage/core-components';
 import { useApi } from '@backstage/core-plugin-api';
 
@@ -59,14 +60,15 @@ const useStyles = makeStyles((theme: Theme) =>
       flex: '1',
       minWidth: '0px',
     },
-    overflowingText: {
+    email: {
       overflow: 'hidden',
+      whiteSpace: 'nowrap',
       textOverflow: 'ellipsis',
       display: 'inline-block',
       maxWidth: '100%',
       '&:hover': {
         overflow: 'visible',
-        wordBreak: 'break-word',
+        whiteSpace: 'normal',
       },
     },
   }),
@@ -105,22 +107,18 @@ const MemberComponent = (props: { member: UserEntity }) => {
             }}
             textAlign="center"
           >
-            <Typography variant="h5">
+            <Typography variant="h6">
               <Link
-                className={classes.overflowingText}
                 to={generatePath(
                   `/catalog/:namespace/user/${metaName}`,
                   entityRouteParams(props.member),
                 )}
               >
-                {displayName}
+                <OverflowTooltip text={displayName} />
               </Link>
             </Typography>
             {profile?.email && (
-              <Link
-                className={classes.overflowingText}
-                to={`mailto:${profile.email}`}
-              >
+              <Link className={classes.email} to={`mailto:${profile.email}`}>
                 {profile.email}
               </Link>
             )}

plugins/org/src/components/Cards/OwnershipCard/ComponentsGrid.tsx

@@ -15,7 +15,12 @@
  */
 
 import { Entity } from '@backstage/catalog-model';
-import { Link, Progress, ResponseErrorPanel } from '@backstage/core-components';
+import {
+  Link,
+  OverflowTooltip,
+  Progress,
+  ResponseErrorPanel,
+} from '@backstage/core-components';
 import { useRouteRef } from '@backstage/core-plugin-api';
 import { BackstageTheme } from '@backstage/theme';
 import {
@@ -44,16 +49,11 @@ const useStyles = makeStyles((theme: BackstageTheme) =>
       },
       height: '100%',
     },
-    title: {
+    bold: {
       fontWeight: theme.typography.fontWeightBold,
-      textAlign: 'center',
-      overflow: 'hidden',
-      textOverflow: 'ellipsis',
-      maxWidth: '100%',
-      '&:hover': {
-        overflow: 'visible',
-        wordBreak: 'break-word',
-      },
+    },
+    smallFont: {
+      fontSize: theme.typography.body2.fontSize,
     },
     entityTypeBox: {
       background: (props: { type: string }) =>
@@ -76,6 +76,7 @@ const EntityCountTile = ({
   const classes = useStyles({ type: type ?? kind });
 
   const rawTitle = type ?? kind;
+  const isLongText = rawTitle.length > 10;
 
   return (
     <Link to={url} variant="body2">
@@ -85,12 +86,19 @@ const EntityCountTile = ({
         flexDirection="column"
         alignItems="center"
       >
-        <Typography className={classes.title} variant="h6">
+        <Typography className={classes.bold} variant="h6">
           {counter}
         </Typography>
-        <Typography className={classes.title} variant="h6">
-          {pluralize(rawTitle.toLocaleUpperCase('en-US'), counter)}
-        </Typography>
+        <Box sx={{ width: '100%', textAlign: 'center' }}>
+          <Typography
+            className={`${classes.bold} ${isLongText && classes.smallFont}`}
+            variant="h6"
+          >
+            <OverflowTooltip
+              text={pluralize(rawTitle.toLocaleUpperCase('en-US'), counter)}
+            />
+          </Typography>
+        </Box>
         {type && <Typography variant="subtitle1">{kind}</Typography>}
       </Box>
     </Link>