This is an automated email from the ASF dual-hosted git repository. rusackas pushed a commit to branch mobile-dashboard-support in repository https://gitbox.apache.org/repos/asf/superset.git
commit 37d0a43eea6e795a7a11c9be404e8d02f8c95360 Author: Evan Rusackas <[email protected]> AuthorDate: Thu Jan 8 19:50:30 2026 -0800 fix(dashboard): make charts full-width on mobile - Override ResizableContainer width/max-width/min-width on mobile - Add CSS overrides in Chart styles for nested containers - Pass '100%' width to ChartRenderer on mobile viewport 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]> --- superset-frontend/src/components/Chart/Chart.tsx | 13 +++++++++++++ .../dashboard/components/resizable/ResizableContainer.tsx | 7 +++++++ 2 files changed, 20 insertions(+) diff --git a/superset-frontend/src/components/Chart/Chart.tsx b/superset-frontend/src/components/Chart/Chart.tsx index 12522b5314..edbd7afa84 100644 --- a/superset-frontend/src/components/Chart/Chart.tsx +++ b/superset-frontend/src/components/Chart/Chart.tsx @@ -152,6 +152,17 @@ const Styles = styled.div<{ height: number; width?: number }>` margin: ${({ theme }) => theme.sizeUnit * 2}px; } } + + /* Full width charts on mobile */ + @media (max-width: 767px) { + width: 100% !important; + + .slice_container, + .slice_container div { + width: 100% !important; + max-width: 100% !important; + } + } `; const LoadingDiv = styled.div` @@ -301,6 +312,8 @@ class Chart extends PureComponent<ChartProps, {}> { isCurrentUserBot() ? ( <ChartRenderer {...this.props} + // On mobile, pass '100%' to let charts fill container width + width={window.innerWidth > 767 ? this.props.width : '100%'} source={this.props.dashboardId ? 'dashboard' : 'explore'} data-test={this.props.vizType} /> diff --git a/superset-frontend/src/dashboard/components/resizable/ResizableContainer.tsx b/superset-frontend/src/dashboard/components/resizable/ResizableContainer.tsx index 43f8369028..71b7723a4d 100644 --- a/superset-frontend/src/dashboard/components/resizable/ResizableContainer.tsx +++ b/superset-frontend/src/dashboard/components/resizable/ResizableContainer.tsx @@ -147,6 +147,13 @@ const StyledResizable = styled(Resizable)` & .resizable-container-handle--bottom { bottom: 0 !important; } + + /* Full width on mobile */ + @media (max-width: 767px) { + width: 100% !important; + max-width: 100% !important; + min-width: 100% !important; + } `; export default function ResizableContainer({
