From 4bb649d511bf0258e125f82cffd4fb7eae265287 Mon Sep 17 00:00:00 2001 From: Johan Persson Date: Thu, 7 May 2026 12:45:33 +0200 Subject: [PATCH] fix(ui): prevent selection checkboxes from creating phantom scroll height Add `position: relative` to `.bui-Table` so it becomes the containing block for react-aria's absolutely positioned hidden checkbox inputs. Without this, the inputs position themselves relative to a distant ancestor, extending its scrollable area and creating phantom scroll height. Signed-off-by: Johan Persson --- .changeset/hot-socks-cross.md | 7 +++++++ packages/ui/src/components/Table/Table.module.css | 2 ++ 2 files changed, 9 insertions(+) create mode 100644 .changeset/hot-socks-cross.md diff --git a/.changeset/hot-socks-cross.md b/.changeset/hot-socks-cross.md new file mode 100644 index 0000000000..5eca29e058 --- /dev/null +++ b/.changeset/hot-socks-cross.md @@ -0,0 +1,7 @@ +--- +'@backstage/ui': patch +--- + +Fixed Table with row selection creating phantom scroll height on ancestor elements by establishing a containing block for visually-hidden checkbox inputs. + +**Affected components:** Table, TableRoot diff --git a/packages/ui/src/components/Table/Table.module.css b/packages/ui/src/components/Table/Table.module.css index 969d27b805..0331b6c350 100644 --- a/packages/ui/src/components/Table/Table.module.css +++ b/packages/ui/src/components/Table/Table.module.css @@ -31,6 +31,8 @@ } .bui-Table { + /* Establishes containing block for react-aria's absolutely positioned hidden checkbox inputs, preventing them from escaping to a distant ancestor and creating phantom scroll height. */ + position: relative; width: 100%; caption-side: bottom; border-collapse: collapse;