From f42f4cc055c8f096ba0f63f706f47cd580353f4a Mon Sep 17 00:00:00 2001
From: Johan Persson <johanopersson@gmail.com>
Date: Tue, 10 Mar 2026 11:30:02 +0100
Subject: [PATCH] fix(ui): truncate Table column headers with ellipsis on
 overflow

Wrap column header text in a label span with text-overflow: ellipsis
so that long headers truncate instead of wrapping to multiple lines.

Signed-off-by: Johan Persson <johanopersson@gmail.com>
---
 .changeset/fix-table-header-ellipsis.md                    | 7 +++++++
 packages/ui/src/components/Table/Table.module.css          | 7 +++++++
 packages/ui/src/components/Table/components/Column.tsx     | 2 +-
 packages/ui/src/components/Table/definition.ts             | 1 +
 .../src/components/Table/stories/Table.visual.stories.tsx  | 3 ++-
 5 files changed, 18 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/fix-table-header-ellipsis.md

diff --git a/.changeset/fix-table-header-ellipsis.md b/.changeset/fix-table-header-ellipsis.md
new file mode 100644
index 0000000000..0418ba4d44
--- /dev/null
+++ b/.changeset/fix-table-header-ellipsis.md
@@ -0,0 +1,7 @@
+---
+'@backstage/ui': patch
+---
+
+Fixed Table column headers overflowing and wrapping when there is not enough space. Headers now truncate with ellipsis instead.
+
+**Affected components:** Table
diff --git a/packages/ui/src/components/Table/Table.module.css b/packages/ui/src/components/Table/Table.module.css
index 9663fd9aa8..062860fa78 100644
--- a/packages/ui/src/components/Table/Table.module.css
+++ b/packages/ui/src/components/Table/Table.module.css
@@ -52,6 +52,13 @@
     gap: var(--bui-space-1);
   }
 
+  .bui-TableHeadLabel {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    min-width: 0;
+  }
+
   .bui-TableHeadSortButton {
     cursor: pointer;
     user-select: none;
diff --git a/packages/ui/src/components/Table/components/Column.tsx b/packages/ui/src/components/Table/components/Column.tsx
index 59db553f39..229ccf8a24 100644
--- a/packages/ui/src/components/Table/components/Column.tsx
+++ b/packages/ui/src/components/Table/components/Column.tsx
@@ -29,7 +29,7 @@ export const Column = (props: ColumnProps) => {
     <ReactAriaColumn className={classes.root} {...restProps}>
       {({ allowsSorting }) => (
         <div className={classes.headContent}>
-          {children}
+          <span className={classes.headLabel}>{children}</span>
           {allowsSorting && (
             <span aria-hidden="true" className={classes.headSortButton}>
               <RiArrowUpLine size={16} />
diff --git a/packages/ui/src/components/Table/definition.ts b/packages/ui/src/components/Table/definition.ts
index 702e2aeb9a..eb41617b93 100644
--- a/packages/ui/src/components/Table/definition.ts
+++ b/packages/ui/src/components/Table/definition.ts
@@ -98,6 +98,7 @@ export const ColumnDefinition = defineComponent<ColumnOwnProps>()({
   classNames: {
     root: 'bui-TableHead',
     headContent: 'bui-TableHeadContent',
+    headLabel: 'bui-TableHeadLabel',
     headSortButton: 'bui-TableHeadSortButton',
   },
   propDefs: {
diff --git a/packages/ui/src/components/Table/stories/Table.visual.stories.tsx b/packages/ui/src/components/Table/stories/Table.visual.stories.tsx
index 3ec6af5789..23810660f1 100644
--- a/packages/ui/src/components/Table/stories/Table.visual.stories.tsx
+++ b/packages/ui/src/components/Table/stories/Table.visual.stories.tsx
@@ -115,7 +115,8 @@ export const NoPagination: Story = {
       },
       {
         id: 'owner',
-        label: 'Owner',
+        label: 'Owner of the component or service in the organization',
+        defaultWidth: 120,
         cell: item => <CellText title={item.owner.name} />,
       },
       {