From eba2f615b6b5ea7defefe51ad56599f547c7190c Mon Sep 17 00:00:00 2001
From: Johan Persson <johanopersson@gmail.com>
Date: Wed, 25 Mar 2026 11:42:26 +0100
Subject: [PATCH] fix(catalog-react): prevent EntityInfoCard header overflow on
 narrow screens

Signed-off-by: Johan Persson <johanopersson@gmail.com>
---
 .changeset/fix-entity-info-card-header-overflow.md    |  5 +++++
 .../src/components/EntityInfoCard/EntityInfoCard.tsx  | 11 ++++++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/fix-entity-info-card-header-overflow.md

diff --git a/.changeset/fix-entity-info-card-header-overflow.md b/.changeset/fix-entity-info-card-header-overflow.md
new file mode 100644
index 0000000000..e40a6149fa
--- /dev/null
+++ b/.changeset/fix-entity-info-card-header-overflow.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-react': patch
+---
+
+Fixed `EntityInfoCard` header overflowing on narrow screens.
diff --git a/plugins/catalog-react/src/components/EntityInfoCard/EntityInfoCard.tsx b/plugins/catalog-react/src/components/EntityInfoCard/EntityInfoCard.tsx
index 54db900fa4..8d28665757 100644
--- a/plugins/catalog-react/src/components/EntityInfoCard/EntityInfoCard.tsx
+++ b/plugins/catalog-react/src/components/EntityInfoCard/EntityInfoCard.tsx
@@ -30,6 +30,10 @@ const useStyles = makeStyles({
   root: {
     height: '100%',
   },
+  title: {
+    minWidth: 0,
+    overflow: 'hidden',
+  },
   footer: {
     display: 'flex',
     justifyContent: 'flex-end',
@@ -55,7 +59,12 @@ export function EntityInfoCard(props: EntityInfoCardProps) {
       {title && (
         <CardHeader>
           <Flex justify="between" align="center">
-            <Text as="h3" variant="title-x-small" weight="bold">
+            <Text
+              as="h3"
+              variant="title-x-small"
+              weight="bold"
+              className={classes.title}
+            >
               {title}
             </Text>
             {headerActions && (