rusackas opened a new pull request, #37141:
URL: https://github.com/apache/superset/pull/37141
### SUMMARY
This PR adds comprehensive mobile support for Superset dashboard
consumption. The changes focus on making dashboards usable and readable on
mobile devices without requiring edit capabilities.
**Key Features:**
- **Mobile Dashboard View**: Full-width charts, hidden edit controls,
slide-out filter drawer
- **Mobile Navigation**: Drawer-based navigation menu accessible via
hamburger icon
- **Dashboard List (Mobile)**: Force card view, full-width cards, search
filter drawer
- **Welcome Page (Mobile)**: Simplified view with compact tabs and
full-width cards
**Components Modified:**
- `DashboardBuilder/DashboardWrapper` - Mobile detection and layout
adjustments
- `Header` - Mobile-specific header with filter drawer trigger
- `ListView` - New `forceViewMode` and mobile filter drawer props
- `SubMenu` - New `leftIcon`/`rightIcon` props for mobile header actions
- `CardCollection` - Full-width cards on mobile with adjusted spacing
- Various CSS media queries for responsive behavior
**Technical Approach:**
- Uses Ant Design's `Grid.useBreakpoint()` for responsive detection
- CSS media queries at 767px breakpoint for styling
- Drawer components for filters and navigation on mobile
- Props-based approach for forcing card view mode
### BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
This is a mobile-focused feature. Test by resizing browser to mobile width
or using device emulation.
### TESTING INSTRUCTIONS
1. **Dashboard View (Mobile)**
- Open any dashboard
- Resize browser to mobile width (<768px) or use device emulation
- Verify charts display full-width
- Verify filter icon appears in header
- Tap filter icon to open filter drawer
- Verify filters work from drawer
2. **Dashboard List (Mobile)**
- Navigate to Dashboards list page
- Resize to mobile width
- Verify cards display full-width
- Verify view toggle is hidden (forced to card view)
- Tap search icon in header to open filter drawer
- Verify search/sort work from drawer
3. **Welcome Page (Mobile)**
- Navigate to home/welcome page
- Resize to mobile width
- Verify cards display full-width
- Verify navigation tabs are compact horizontal style
4. **Run Tests**
```bash
npm run test -- --testPathPatterns "ListView.test.tsx" --testPathPatterns
"SubMenu.test.tsx"
```
### ADDITIONAL INFORMATION
- [x] Changes UI
- [x] Introduces new feature or API
🤖 Generated with [Claude Code](https://claude.com/claude-code)
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
