diff --git a/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx b/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx index baa54df0198..19a037b0190 100644 --- a/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx +++ b/superset-frontend/plugins/plugin-chart-table/src/Styles.tsx @@ -98,6 +98,11 @@ export default styled.div` background-color: ${theme.colorBgLayout}; } + .dt-select-page-size .ant-select .ant-select-arrow { + color: ${theme.colorTextQuaternary}; + z-index: 11; + } + /* Controls and metrics */ .dt-controls { padding-bottom: 0.65em; diff --git a/superset-frontend/plugins/plugin-chart-table/test/TableChart.test.tsx b/superset-frontend/plugins/plugin-chart-table/test/TableChart.test.tsx index a043c67b39f..103e5e61a64 100644 --- a/superset-frontend/plugins/plugin-chart-table/test/TableChart.test.tsx +++ b/superset-frontend/plugins/plugin-chart-table/test/TableChart.test.tsx @@ -1937,6 +1937,25 @@ describe('plugin-chart-table', () => { expect(clearCall![0].extraFormData.filters).toEqual([]); }); + test('page size selector arrow stays above resize handles (#39305)', () => { + // .resize-handle elements in dashboard ResizableContainer sit at + // z-index: 10 — the page size arrow must stack above them or it + // gets covered on dashboard charts. + const { container } = render( + ProviderWrapper({ + children: ( + + ), + }), + ); + + const arrow = container.querySelector( + '.dt-select-page-size .ant-select .ant-select-arrow', + ); + expect(arrow).not.toBeNull(); + expect(getComputedStyle(arrow as HTMLElement).zIndex).toBe('11'); + }); + test('recalculates totals when user filters data', async () => { const formDataWithTotals = { ...testData.basic.formData,