This is an automated email from the ASF dual-hosted git repository. msyavuz pushed a commit to branch msyavuz/fix/table-scrollbar-chrome in repository https://gitbox.apache.org/repos/asf/superset.git
commit 26db5e04b3ee39b2be5fe7b2255975a8b5617e08 Author: Mehmet Salih Yavuz <[email protected]> AuthorDate: Tue Sep 30 15:42:21 2025 +0300 fix(tables): Dark mode scrollbar styles in chrome --- .../src/components/Table/index.tsx | 27 ++++++++++++++ .../src/PivotTableChart.tsx | 35 ++++++++++++++++-- .../src/DataTable/hooks/useSticky.tsx | 41 ++++++++++++++++++++++ 3 files changed, 100 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..22632bd06f 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: 4px; + + &: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..2ab2f02c54 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: 4px; + + &: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..2dacc5452f 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'); } @@ -233,6 +236,25 @@ function StickyWrap({ visibility: 'hidden', scrollbarGutter: 'stable', }} + css={css` + &::-webkit-scrollbar { + width: 8px; + height: 8px; + } + &::-webkit-scrollbar-track { + background: ${theme.colorFillQuaternary}; + } + &::-webkit-scrollbar-thumb { + background: ${theme.colorFillSecondary}; + border-radius: 4px; + &:hover { + background: ${theme.colorFillTertiary}; + } + } + &::-webkit-scrollbar-corner { + background: ${theme.colorFillQuaternary}; + } + `} role="presentation" > {cloneElement( @@ -316,6 +338,25 @@ function StickyWrap({ overflow: 'auto', scrollbarGutter: 'stable', }} + css={css` + &::-webkit-scrollbar { + width: 8px; + height: 8px; + } + &::-webkit-scrollbar-track { + background: ${theme.colorFillQuaternary}; + } + &::-webkit-scrollbar-thumb { + background: ${theme.colorFillSecondary}; + border-radius: 4px; + &:hover { + background: ${theme.colorFillTertiary}; + } + } + &::-webkit-scrollbar-corner { + background: ${theme.colorFillQuaternary}; + } + `} onScroll={sticky.hasHorizontalScroll ? onScroll : undefined} role="presentation" >
