You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@superset.apache.org by ru...@apache.org on 2026/01/14 21:11:48 UTC
(superset) 12/16: feat(mobile): Force card view and hide toggle on dashboard list
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 cb98ed86e50c27e62eca3873b0d39ed5ee363aa0
Author: Evan Rusackas <ev...@rusackas.com>
AuthorDate: Fri Jan 9 21:11:33 2026 -0800
feat(mobile): Force card view and hide toggle on dashboard list
- Hide view mode toggle (card/list) on mobile
- Force card view as default on mobile devices
- Table view still works on desktop
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <no...@anthropic.com>
---
superset-frontend/src/components/ListView/ListView.tsx | 5 +++++
superset-frontend/src/pages/DashboardList/index.tsx | 4 ++++
2 files changed, 9 insertions(+)
diff --git a/superset-frontend/src/components/ListView/ListView.tsx b/superset-frontend/src/components/ListView/ListView.tsx
index 22db6196a3..a8bc0bff5d 100644
--- a/superset-frontend/src/components/ListView/ListView.tsx
+++ b/superset-frontend/src/components/ListView/ListView.tsx
@@ -160,6 +160,11 @@ const ViewModeContainer = styled.div`
white-space: nowrap;
display: inline-block;
+ /* Hide view mode toggle on mobile - force card view */
+ @media (max-width: 767px) {
+ display: none;
+ }
+
.toggle-button {
display: inline-block;
border-radius: ${theme.borderRadius}px;
diff --git a/superset-frontend/src/pages/DashboardList/index.tsx b/superset-frontend/src/pages/DashboardList/index.tsx
index 799055dddb..2909c70efc 100644
--- a/superset-frontend/src/pages/DashboardList/index.tsx
+++ b/superset-frontend/src/pages/DashboardList/index.tsx
@@ -38,6 +38,7 @@ import {
ConfirmStatusChange,
DeleteModal,
FaveStar,
+ Grid,
Loading,
PublishedLabel,
Tooltip,
@@ -144,6 +145,7 @@ const DASHBOARD_COLUMNS_TO_FETCH = [
function DashboardList(props: DashboardListProps) {
const { addDangerToast, addSuccessToast, user } = props;
+ const { md: isNotMobile } = Grid.useBreakpoint();
const { roles } = useSelector<any, UserWithPermissionsAndRoles>(
state => state.user,
);
@@ -813,6 +815,8 @@ function DashboardList(props: DashboardListProps) {
}
renderCard={renderCard}
defaultViewMode={
+ // Force card view on mobile
+ !isNotMobile ||
isFeatureEnabled(FeatureFlag.ListviewsDefaultCardView)
? 'card'
: 'table'