Use ellipsis in the header

Signed-off-by: Philipp Hugenroth <philipph@spotify.com>

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),
   },

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,