This is an automated email from the ASF dual-hosted git repository.
diegopucci pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git
The following commit(s) were added to refs/heads/master by this push:
new 412587ad41 fix(tables): Dark mode scrollbar styles for webkit (#35338)
412587ad41 is described below
commit 412587ad4102dcd661389c67cbc97bdf10a0d454
Author: Mehmet Salih Yavuz <[email protected]>
AuthorDate: Fri Oct 10 13:10:54 2025 +0300
fix(tables): Dark mode scrollbar styles for webkit (#35338)
---
.../src/components/Table/index.tsx | 27 +++++++++++++++++
.../src/PivotTableChart.tsx | 35 ++++++++++++++++++++--
.../src/DataTable/hooks/useSticky.tsx | 25 ++++++++++++++++
3 files changed, 84 insertions(+), 3 deletions(-)
diff --git
a/superset-frontend/packages/superset-ui-core/src/components/Table/index.tsx
b/superset-frontend/packages/superset-ui-core/src/components/Table/index.tsx
index 3f7ad804a7..1e2782be27 100644
--- a/superset-frontend/packages/superset-ui-core/src/components/Table/index.tsx
+++ b/superset-frontend/packages/superset-ui-core/src/components/Table/index.tsx
@@ -167,6 +167,33 @@ const StyledTable = styled(AntTable as
FC<AntTableProps>)<{ height?: number }>(
.ant-table-body {
overflow: auto;
height: ${height ? `${height}px` : undefined};
+
+ /* Chrome/Safari/Edge webkit scrollbar styling */
+ &::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+ }
+
+ &::-webkit-scrollbar-track {
+ background: ${theme.colorFillQuaternary};
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background: ${theme.colorFillSecondary};
+ border-radius: ${theme.borderRadiusSM}px;
+
+ &:hover {
+ background: ${theme.colorFillTertiary};
+ }
+ }
+
+ &::-webkit-scrollbar-corner {
+ background: ${theme.colorFillQuaternary};
+ }
+
+ /* Firefox scrollbar styling */
+ scrollbar-width: thin;
+ scrollbar-color: ${theme.colorFillSecondary}
${theme.colorFillQuaternary};
}
.ant-spin-nested-loading .ant-spin .ant-spin-dot {
diff --git
a/superset-frontend/plugins/plugin-chart-pivot-table/src/PivotTableChart.tsx
b/superset-frontend/plugins/plugin-chart-pivot-table/src/PivotTableChart.tsx
index c2a3f22b3e..63d465807f 100644
--- a/superset-frontend/plugins/plugin-chart-pivot-table/src/PivotTableChart.tsx
+++ b/superset-frontend/plugins/plugin-chart-pivot-table/src/PivotTableChart.tsx
@@ -55,9 +55,38 @@ const Styles = styled.div<PivotTableStylesProps>`
`;
const PivotTableWrapper = styled.div`
- height: 100%;
- max-width: inherit;
- overflow: auto;
+ ${({ theme }) => `
+ height: 100%;
+ max-width: inherit;
+ overflow: auto;
+
+ /* Chrome/Safari/Edge webkit scrollbar styling */
+ &::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+ }
+
+ &::-webkit-scrollbar-track {
+ background: ${theme.colorFillQuaternary};
+ }
+
+ &::-webkit-scrollbar-thumb {
+ background: ${theme.colorFillSecondary};
+ border-radius: ${theme.borderRadiusSM}px;
+
+ &:hover {
+ background: ${theme.colorFillTertiary};
+ }
+ }
+
+ &::-webkit-scrollbar-corner {
+ background: ${theme.colorFillQuaternary};
+ }
+
+ /* Firefox scrollbar styling */
+ scrollbar-width: thin;
+ scrollbar-color: ${theme.colorFillSecondary} ${theme.colorFillQuaternary};
+ `}
`;
const METRIC_KEY = t('Metric');
diff --git
a/superset-frontend/plugins/plugin-chart-table/src/DataTable/hooks/useSticky.tsx
b/superset-frontend/plugins/plugin-chart-table/src/DataTable/hooks/useSticky.tsx
index 46e556ef82..df8849c482 100644
---
a/superset-frontend/plugins/plugin-chart-table/src/DataTable/hooks/useSticky.tsx
+++
b/superset-frontend/plugins/plugin-chart-table/src/DataTable/hooks/useSticky.tsx
@@ -30,6 +30,7 @@ import {
UIEventHandler,
} from 'react';
import { TableInstance, Hooks } from 'react-table';
+import { useTheme, css } from '@superset-ui/core';
import getScrollBarSize from '../utils/getScrollBarSize';
import needScrollBar from '../utils/needScrollBar';
import useMountedMemo from '../utils/useMountedMemo';
@@ -125,6 +126,8 @@ function StickyWrap({
children: Table;
sticky?: StickyState; // current sticky element sizes
}) {
+ const theme = useTheme();
+
if (!table || table.type !== 'table') {
throw new Error('<StickyWrap> must have only one <table> element as
child');
}
@@ -221,6 +224,26 @@ function StickyWrap({
let footerTable: ReactElement | undefined;
let bodyTable: ReactElement | undefined;
+ const scrollBarStyles = css`
+ &::-webkit-scrollbar {
+ width: 8px;
+ height: 8px;
+ }
+ &::-webkit-scrollbar-track {
+ background: ${theme.colorFillQuaternary};
+ }
+ &::-webkit-scrollbar-thumb {
+ background: ${theme.colorFillSecondary};
+ border-radius: ${theme.borderRadiusSM}px;
+ &:hover {
+ background: ${theme.colorFillTertiary};
+ }
+ }
+ &::-webkit-scrollbar-corner {
+ background: ${theme.colorFillQuaternary};
+ }
+ `;
+
if (needSizer) {
const theadWithRef = cloneElement(thead, { ref: theadRef });
const tfootWithRef = tfoot && cloneElement(tfoot, { ref: tfootRef });
@@ -233,6 +256,7 @@ function StickyWrap({
visibility: 'hidden',
scrollbarGutter: 'stable',
}}
+ css={scrollBarStyles}
role="presentation"
>
{cloneElement(
@@ -316,6 +340,7 @@ function StickyWrap({
overflow: 'auto',
scrollbarGutter: 'stable',
}}
+ css={scrollBarStyles}
onScroll={sticky.hasHorizontalScroll ? onScroll : undefined}
role="presentation"
>
