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) => { {({ allowsSorting }) => (
- {children} + {children} {allowsSorting && (