Dashboard Filter Bar overlaps chart content on smaller screen widths
- Dominant language
- Python
- Stars
- 74.8k
- Forks
- 18.3k
- Avg merge
- 2d 5h
- Merged PRs (30d)
- 685
Description
### Summary
On dashboards with native filters enabled, the filter bar overlaps chart content on smaller screen widths and laptop displays.
### Affected Area
Dashboard → Native Filters bar (top area)
### Current Behavior
- When multiple native filters are added
- On smaller screens or reduced browser width
- The filter bar wraps to the next line and overlaps chart containers below
- Chart titles and controls become partially hidden
### Expected Behavior
- Filter bar should push dashboard content downward
- Charts should never be overlapped by filter UI
- Layout should remain readable at common breakpoints (≤ 1366px width)
### Why this matters
This is a visual/layout issue that:
- Affects readability
- Makes dashboards feel broken on laptops
- Causes confusion for non-technical users
- Is purely cosmetic (no data or logic affected)
### Proposed Direction (not implementation)
- Adjust filter bar container height handling
- Improve flex-wrap / margin-bottom spacing
- Add responsive breakpoint handling for stacked filters
### Environment
- Apache Superset (latest `main`)
- Chrome / Firefox
- Laptop screen (13–14 inch)
Contributor guide
Research direction
Start in the Dashboard → Native Filters bar area and reproduce the overlap with multiple native filters at browser widths of 1366px or less in Chrome or Firefox. Trace the responsive layout around the filter bar and chart containers; done means stacked filters push the dashboard content down without hiding chart titles or controls.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react
- Domain
- data-visualization, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 58/100