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

@@ -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

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;

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} />

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: {

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} />,
       },
       {