- Fade the clipped edge of the swipeable tab bar with a theme-colored
gradient (restyling antd's ping-edge shadow elements, which are hard
to see on dark themes) so scrollability is visible
- Let the dashboard title header scroll away on mobile instead of
pinning underneath the higher-z sticky tab bar, where its bottom edge
(kebab button) peeked out below the tabs
- Add padding below the tab bar so the first card doesn't butt against
it; padding rather than margin so the gap is part of the opaque
sticky bar when stuck
- Fix dead User Info / Logout taps in the mobile nav drawer: the reused
desktop items navigate via anchors that only span their label text,
but the drawer's tap target is the full row — navigate explicitly on
row tap
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Templates hot-reload before the Python context processor does during dev
reloads (and could similarly skew in a rolling deploy), which raised
'is_feature_enabled is undefined' when rendering spa.html. Check
'is defined' before calling so the page renders without the meta tag
instead of erroring.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Three fixes surfaced by measuring the dashboard header in an iPhone
emulation instead of a resized desktop window:
- Serve <meta name="viewport" content="width=device-width"> from
spa.html when MOBILE_CONSUMPTION_MODE is on. Without it mobile
browsers lay the page out at the ~980px legacy viewport and none of
the mobile breakpoints ever match on a real device — the mode only
appeared to work in resized desktop windows and devtools emulation.
Gated on the flag so desktop-only deployments keep shrink-to-fit
rendering on phones; exposes is_feature_enabled to Jinja via the
common context processor.
- Replace the dashboard tab overflow dropdown with a swipeable tab bar
on mobile. The "more" menu is a poor touch target and duplicates
half-clipped tabs; antd's tab nav scrolls natively on touch and its
ping-edge shadows signal overflow.
- DynamicEditableTitle sized its input from a hidden sizer measured
before webfonts loaded (fallback metrics ~10px narrower) and never
re-measured, truncating titles that actually fit; the input also
rendered at font-weight 400 while the sizer measured at the
container's 500. Re-measure on document.fonts.ready and inherit the
container's font weight.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
- The dashboard header's refresh icon duplicates the kebab menu's
"Refresh dashboard" item on mobile, where title space is scarce; hide
the icon and keep the menu item
- Rows collapsed into a vertical stack lost their gutter (the desktop
margin-right is zeroed), so same-row neighbors touched while
cross-row neighbors kept GridContent's 16px margin; give stacked row
children the same theme.sizeUnit * 4 gutter GridContent and Column use
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Fixes two layout defects in mobile consumption mode:
- Markdown, Column, and other non-chart grid components kept their
desktop pixel widths (only ChartHolder got the JS-level mobile width),
rendering narrow and clipping charts nested inside columns. Restore
the full-width mobile CSS on ResizableContainer, gated on the feature
flag, to cover every component that sizes via re-resizable's inline
width.
- Charts authored tall for wide desktop grids became towers in the
single-column stacked layout. Cap the height at the viewport minus
app chrome (MOBILE_CHROME_HEIGHT), applied to both the container
shell and the height handed to the chart plugin so they stay in sync.
Also rework useIsMobile to subscribe to matchMedia only when
MOBILE_CONSUMPTION_MODE is enabled, instead of antd Grid.useBreakpoint.
useBreakpoint forces a post-mount re-render of every consumer even with
the flag off, which changed measured chart header heights and made the
flag non-inert for default deployments. With the rework, flag off means
no subscription, no state updates, and zero render delta.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
The shipped default in superset/config.py remains False; this only turns
the flag on for the docker compose development environment, matching the
other in-development flags enabled there.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Review-pass hardening of the mobile consumption mode:
- Add MOBILE_CONSUMPTION_MODE feature flag (default off, @lifecycle:
development) and a shared useIsMobile() hook; all mobile behavior and
mobile CSS now keys off the flag, so default behavior is unchanged
- Fix chart sizing: ChartHolder reports the full grid column count on
mobile so plugins get the true stacked width; drop the
width:100%!important CSS overrides on Chart/Row/ResizableContainer
- ListView: mount a single FilterControls instance (inline or drawer)
so filtersRef/clearFilters always target the visible instance; drop
the desktop-filters/desktop-sort CSS-hidden duplicates
- Route gating: routes declare mobileSupported in routes.tsx and
MobileRouteGuard receives it as a prop; remove the regex allowlist,
the unregistered /mobile-unsupported entry, and dead ?from= handling
- FilterBar: first-class mobileMode in verticalConfig replaces the
:has()/!important drawer CSS surgery in DashboardBuilder
- Consumption-only controls (explore links, slice kebab menus, card
kebab menus) are render-gated instead of CSS-hidden for a11y
- Use theme.screenSMMax instead of hardcoded 767px media queries
- RightMenu: match the Dashboards nav item by FAB-internal name, not
translated label; fix getOwnerName -> getUserName and owners ->
editors after the Subject-model refactor
- MobileUnsupported: use Button/link + icon instead of raw styled
buttons and a trailing arrow outside the translated string
- Regenerate docs/static/feature-flags.json
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Adds a mobile-optimized dashboard consumption experience:
- Drawer-based nav and filter menus on mobile
- Full-width chart layout on small screens, with charts stacked
- Compact dashboard header (hidden action buttons that don't apply in
consumption mode)
- Force card view (and hide the table/card toggle) on the dashboard list
- Full-width cards on the welcome page when viewed on mobile
- Filter drawer for the dashboard list page
- Route guard for pages that don't yet have a mobile experience, with a
dedicated MobileUnsupported page
- Mock-friendly `Grid.useBreakpoint` plumbing for existing component
tests, plus a new mobile-focused test suite and Playwright coverage
Squashed from 32 commits on the long-running mobile-dashboard-support
branch and rebased onto current master.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
