sadpandajoe opened a new pull request, #45480: URL: https://github.com/apache/superset/pull/45480
### SUMMARY Root cause: #41882 (be600f78fc, ag-grid 35.3.1 → 36.0.0) changed how the grid header is laid out. In ag-grid 35, `.ag-header` was its own block above the scrolling body and painted its own `--ag-header-background-color`. In ag-grid 36, the header rows live in a `position: sticky` container (`.ag-grid-pinned-top-rows`) inside the same scroll viewport (`.ag-grid-viewport`) as the data rows. ag-grid paints that container with `--ag-data-background-color`, which derives from the `backgroundColor` theme param. The header color itself is only a tint drawn on `.ag-header-row::after`. `ThemedAgGridReact` deliberately sets `backgroundColor: 'transparent'` and `headerBackgroundColor: theme.colorFillTertiary` (4% black in the default theme), so on ag-grid 36 the sticky header is almost fully see-through. Rows scrolling beneath it show through the header text in every `GridTable` consumer: SQL Lab results, SQL Lab table preview, and the Explore data/samples panes. The AG Grid Table chart is unaffected because its container already overrides `--ag-background-color`. Fix: `GridTable` passes an opaque `backgroundColor: theme.colorBgContainer` to `ThemedAgGridReact`, merged under any caller-supplied `themeOverrides`, so callers can still override it. `colorBgContainer` is the background of the SQL Lab editor and the Explore data pane that host the grid, so nothing changes visually except that rows no longer show through. The header keeps its existing grey tint, which now sits on an opaque base. `ThemedAgGridReact`'s shared default is left untouched. ### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF SQL Lab, `SELECT * FROM birth_names LIMIT 100`, results grid scrolled so row 10/11 sits partly under the header. **Before (light):** row 10's values overlap the header labels.  **Before (dark):**  **After (light):** the header is opaque and hides the row beneath it.  **After (dark):**  ### TESTING INSTRUCTIONS 1. Open SQL Lab and run a query that returns more rows than fit in the results pane, e.g. `SELECT * FROM birth_names LIMIT 100`. 2. Scroll the results grid down slowly and stop midway through a row, so the row sits partly under the column header. 3. Before this change, that row's text (including the row-number column) shows through the header. After it, the header is opaque and hides the row. 4. Repeat in the Explore chart's data pane (Results / Samples tabs), and in dark mode. 5. Scroll horizontally and confirm cells don't show through the pinned row-number column. ### ADDITIONAL INFORMATION - [x] Has associated issue: Fixes #45465 - [ ] Required feature flags: - [x] Changes UI - [ ] Includes DB Migration (follow approval process in [SIP-59](https://github.com/apache/superset/issues/13351)) - [ ] Migration is atomic, supports rollback & is backwards-compatible - [ ] Confirm DB migration upgrade and downgrade tested - [ ] Runtime estimates and downtime expectations provided - [ ] Introduces new feature or API - [ ] Removes existing feature or API - Notes: the regression test asserts on ag-grid's generated theme CSS via the private `_getParamsCss()` because jsdom cannot paint; an ag-grid upgrade could require updating that assertion. - Notes: the opaque background uses `colorBgContainer` (the surface of the SQL Lab editor and Explore data pane) rather than `colorBgBase` as the AG Grid Table chart does; on a surface with a different background (e.g. a modal in dark mode) the grid body can be a slightly different shade. 🤖 Generated with [Claude Code](https://claude.com/claude-code) -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
