Merge branch 'master' into fix-sql-lab-grid-menu-transparent-bg

ThemedAgGridReact set backgroundColor to transparent so the surrounding
app shows through the grid body, but never set the separate params
(chromeBackgroundColor, menuBackgroundColor, sideBarBackgroundColor,
tooltipBackgroundColor, modalOverlayBackgroundColor) that control the
background of ag-grid's own context/column menus, side bar, tooltips
and loading/no-rows overlays. Those inherited the transparency too,
making native right-click and column menus unreadable wherever they
render (e.g. the SQL Lab results grid).

Set these params to theme.colorBgElevated and enable menuBorder for
better readability against the surrounding surface, matching the
resolved default background used elsewhere in the app.

superset-frontend/packages/superset-ui-core/src/components/ThemedAgGridReact/ThemedAgGridReact.test.tsx

@@ -246,6 +246,34 @@ test('wraps component with proper container div', () => {
   expect(wrapper).toHaveAttribute('data-themed-ag-grid', 'true');
 });
 
+test('applies non-transparent backgrounds to native menus, tooltips and overlays', () => {
+  const customTheme = {
+    ...supersetTheme,
+    colorBgElevated: '#f2f2f2',
+  };
+
+  render(
+    <ThemeProvider theme={customTheme}>
+      <ThemedAgGridReact rowData={mockRowData} columnDefs={mockColumnDefs} />
+    </ThemeProvider>,
+  );
+
+  const agGrid = screen.getByTestId('ag-grid-react');
+  const theme = JSON.parse(agGrid.getAttribute('data-theme') || '{}');
+
+  // ag-grid's own context/column menus, side bar, tooltips and overlays are
+  // rendered against these params rather than `backgroundColor` (which is
+  // intentionally 'transparent' so the surrounding app shows through the
+  // grid body). Without explicit values they inherit transparency too,
+  // making native menus/popups unreadable.
+  expect(theme.chromeBackgroundColor).toBe('#f2f2f2');
+  expect(theme.menuBackgroundColor).toBe('#f2f2f2');
+  expect(theme.menuBorder).toBe(true);
+  expect(theme.sideBarBackgroundColor).toBe('#f2f2f2');
+  expect(theme.tooltipBackgroundColor).toBe('#f2f2f2');
+  expect(theme.modalOverlayBackgroundColor).toBe('#f2f2f2');
+});
+
 test('handles missing theme gracefully', () => {
   const incompleteTheme = {
     ...supersetTheme,

superset-frontend/packages/superset-ui-core/src/components/ThemedAgGridReact/index.tsx

@@ -104,6 +104,17 @@ export const ThemedAgGridReact = forwardRef<
       foregroundColor: theme.colorText,
       browserColorScheme: isDarkMode ? 'dark' : 'light',
 
+      // Native menus, popups, side bar, tooltips and loading/no-rows overlays
+      // are rendered against these params rather than `backgroundColor`
+      // (which is intentionally transparent). Without explicit values they
+      // inherit transparency too, making them unreadable.
+      chromeBackgroundColor: theme.colorBgElevated,
+      menuBackgroundColor: theme.colorBgElevated,
+      menuBorder: true,
+      sideBarBackgroundColor: theme.colorBgElevated,
+      tooltipBackgroundColor: theme.colorBgElevated,
+      modalOverlayBackgroundColor: theme.colorBgElevated,
+
       // Header styling
       headerBackgroundColor: theme.colorFillTertiary,
       headerTextColor: theme.colorTextHeading,