From 5c4cc638549a3eae7489d5beba07b1e0db56e68d Mon Sep 17 00:00:00 2001
From: Philipp Hugenroth <philipph@spotify.com>
Date: Thu, 15 Jul 2021 14:00:24 +0200
Subject: [PATCH] Use ellipsis in the header

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>
---
 .../src/layout/Header/Header.tsx              |  1 +
 .../components/EntityLayout/EntityLayout.tsx  | 39 ++++++++++++-------
 2 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/packages/core-components/src/layout/Header/Header.tsx b/packages/core-components/src/layout/Header/Header.tsx
index b02ba29d88..572f1f8c32 100644
--- a/packages/core-components/src/layout/Header/Header.tsx
+++ b/packages/core-components/src/layout/Header/Header.tsx
@@ -42,6 +42,7 @@ const useStyles = makeStyles<BackstageTheme>(theme => ({
     backgroundSize: 'cover',
   },
   leftItemsBox: {
+    maxWidth: '100%',
     flex: '1 1 auto',
     marginBottom: theme.spacing(1),
   },
diff --git a/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx b/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx
index 9cb0b7c961..a5b85082cc 100644
--- a/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx
+++ b/plugins/catalog/src/components/EntityLayout/EntityLayout.tsx
@@ -20,9 +20,17 @@ import {
   RELATION_OWNED_BY,
 } from '@backstage/catalog-model';
 import {
-  useElementFilter,
+  Content,
+  Header,
+  HeaderLabel,
+  Page,
+  Progress,
+  RoutedTabs,
+} from '@backstage/core-components';
+import {
   attachComponentData,
   IconComponent,
+  useElementFilter,
 } from '@backstage/core-plugin-api';
 import {
   EntityContext,
@@ -37,14 +45,6 @@ import { useNavigate } from 'react-router';
 import { EntityContextMenu } from '../EntityContextMenu/EntityContextMenu';
 import { FavouriteEntity } from '../FavouriteEntity/FavouriteEntity';
 import { UnregisterEntityDialog } from '../UnregisterEntityDialog/UnregisterEntityDialog';
-import {
-  Content,
-  Header,
-  HeaderLabel,
-  Page,
-  Progress,
-  RoutedTabs,
-} from '@backstage/core-components';
 
 type SubRoute = {
   path: string;
@@ -68,12 +68,21 @@ const EntityLayoutTitle = ({
 }: {
   title: string;
   entity: Entity | undefined;
-}) => (
-  <Box display="inline-flex" alignItems="center" height="1em">
-    {title}
-    {entity && <FavouriteEntity entity={entity} />}
-  </Box>
-);
+}) => {
+  return (
+    <Box display="inline-flex" alignItems="center" height="1em" maxWidth="100%">
+      <Box
+        component="span"
+        textOverflow="ellipsis"
+        whiteSpace="nowrap"
+        overflow="hidden"
+      >
+        {title}
+      </Box>
+      {entity && <FavouriteEntity entity={entity} />}
+    </Box>
+  );
+};
 
 const headerProps = (
   paramKind: string | undefined,