Why

When a user scrolls a table horizontally, for example the device list at /objects/InfraDevice, the count at the bottom of the identifier column is hidden. The footer cells that scroll under it are drawn on top of it. The bug has been in every release since v1.11.1.

Cause: #10427 gave every footer cell z-10 so that the row actions button (⋮) no longer shows through the footer. When elements have the same z-index, the browser draws the later ones on top. So the footer cells that scroll under the count are drawn over it.

Goal: the count stays visible, and the row actions stay behind the footer.

Non-goals:

• No backport to stable in this PR. stable has the same bug, but its data-table.tsx differs from develop's, so the fix needs a separate PR.

What changed

What a user sees on every table that shows a count: object lists, IP addresses and prefixes, the relationship tabs and the role management tables.

• The count stays at the bottom of the identifier column when the table scrolls horizontally.
• The row actions button (⋮) stays behind the footer when rows scroll under it.
• The right end of the footer stays aligned with the row actions column.

Implementation notes:

• The footer follows the header row's layering: only its corner cells are pinned and raised.
  • The first cell holds the count and is pinned left at z-10.
  • The last cell is pinned right at z-10 and is 40px wide, like the row actions header and body cells.
  • The middle cells have no z-index.
• Pinning the last footer cell assumes the last column is the pinned row actions column. The default column layout already assumes this, and all 9 tables that show a count end with that column.
• I compared these alternatives in a prototype of the device list and rejected them:
  • A lower z-index (z-2) on the middle footer cells. It fixes both bugs, but every footer cell still has a z-index.
  • One footer cell spanning every column. The footer loses its column dividers.
  • The count in a bar below the scroll area. The count moves away from the identifier column, and every table that shows a count would have to render the bar itself.
• One test replaces the test from #10427, which required a z-index on every footer cell.

How to review

• Test: cd frontend/app && pnpm vitest run src/shared/components/table/data-table.test.tsx. The test "shows the count footer over the rows and columns scrolled behind it" fails on develop, where the count is covered, and on the code from before #10427, where the row actions show through the footer.
• Manual: open /objects/InfraDevice in a window short and narrow enough that the table scrolls both ways.
  • Scroll right: the count stays visible.
  • Scroll down: the ⋮ buttons go behind the footer.