From bba9df7f9e1542ba6d7b1c892f1d128d70d8ebed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fredrik=20Adel=C3=B6w?= <freben@gmail.com>
Date: Tue, 22 Jun 2021 09:30:36 +0200
Subject: [PATCH] improve the wrapping behavior of long entity links
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Fredrik Adelöw <freben@gmail.com>
---
 .changeset/blue-planes-fail.md                   |  5 +++++
 .../src/components/EntityLinksCard/IconLink.tsx  | 16 ++++++++--------
 2 files changed, 13 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/blue-planes-fail.md

diff --git a/.changeset/blue-planes-fail.md b/.changeset/blue-planes-fail.md
new file mode 100644
index 0000000000..ba8eca812a
--- /dev/null
+++ b/.changeset/blue-planes-fail.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog': patch
+---
+
+improve the wrapping behavior of long entity links
diff --git a/plugins/catalog/src/components/EntityLinksCard/IconLink.tsx b/plugins/catalog/src/components/EntityLinksCard/IconLink.tsx
index da299ae1e0..c1bc8c5fc0 100644
--- a/plugins/catalog/src/components/EntityLinksCard/IconLink.tsx
+++ b/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>
   );
 };