AG Grid 36: row backgrounds stop at the last column (.ag-row::after filler)

[amcclain]

Summary

Under AG Grid 36, a row's background stops at the last column. When the columns are narrower than the grid, the empty space to the right of the last column shows the grid's base background instead of the row's. This affects tree and group rows and the pinned total row, in both light and dark themes.

Found upgrading Jobsite to hoist-react 88.0.0 / AG Grid 36.2.0.

Cause

AG Grid 36 appends a .ag-row::after filler to each row, with flex: 1 0 0 and background-color: var(--ag-data-background-color). It fills the space after the last cell, but it takes the grid's data background, not Hoist's row background.

Computed styles for the Jobsite Time grid (tree grid with a pinned total row, 2400px wide, columns ending at 1359px):

Theme	Row background-color	.ag-row::after background-color
Light	rgb(229, 241, 250)	rgb(255, 255, 255)
Dark	rgb(23, 54, 69)	rgb(19, 24, 27)

The same values show on the pinned total row and on level-0 tree rows.

To reproduce

1. Open any grid whose columns do not fill its width. Widen the window or use a grid with few columns.
2. Look at group or tree rows, the pinned total row, or striped rows.
3. The row color ends at the last column, and the rest of the row width is the plain grid background.

The upgrading agent reported that v87 on AG Grid 35 painted these rows full width. That comparison has not been re-run.