Merge pull request #6156 from backstage/freben/better-links

improve the wrapping behavior of long entity links

.changeset/blue-planes-fail.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': patch
+---
+
+improve the wrapping behavior of long entity links

plugins/catalog/src/components/EntityLinksCard/IconLink.tsx

@@ -15,7 +15,7 @@
  */
 
 import { Link, IconComponent } from '@backstage/core';
-import { Grid, makeStyles, Typography } from '@material-ui/core';
+import { makeStyles, Box, Typography } from '@material-ui/core';
 import LanguageIcon from '@material-ui/icons/Language';
 import React from 'react';
 
@@ -42,17 +42,17 @@ export const IconLink = ({
   const classes = useStyles();
 
   return (
-    <Grid container direction="row" spacing={1}>
-      <Grid item>
-        <Typography component="div" className={classes.svgIcon}>
+    <Box display="flex">
+      <Box mr={1} className={classes.svgIcon}>
+        <Typography component="div">
           {Icon ? <Icon /> : <LanguageIcon />}
         </Typography>
-      </Grid>
-      <Grid item>
+      </Box>
+      <Box flex>
         <Link to={href} target="_blank" rel="noopener">
           {text || href}
         </Link>
-      </Grid>
-    </Grid>
+      </Box>
+    </Box>
   );
 };