fix(dashboard): fix dashboard header overflow issue#35989
fix(dashboard): fix dashboard header overflow issue#35989bsovran wants to merge 1 commit intoapache:masterfrom
Conversation
Code Review Agent Run #c9d969Actionable Suggestions - 0Review Details
Bito Usage GuideCommands Type the following command in the pull request comment and save the comment.
Refer to the documentation for additional commands. Configuration This repository uses Documentation & Help AI Code Review powered by |
![korbit-ai[bot]](https://avatars.githubusercontent.com/in/322216?s=60&v=4){kind=small}
There was a problem hiding this comment.
Review by Korbit AI
Korbit automatically attempts to detect when you fix issues in new commits.
| Category | Issue | Status |
|---|---|---|
 |
Header uses fixed width instead of actual resized filter bar width ▹ view | |
 |
Unnecessary recalculation of filter bar width ▹ view |
Files scanned
| File Path | Reviewed |
|---|---|
| superset-frontend/src/dashboard/components/DashboardBuilder/DashboardBuilder.tsx | ✅ |
Explore our documentation to understand the languages and file types we support and the files we ignore.
Check out our docs on how you can make Korbit work best for you and your team.
| const headerFilterBarWidth = showVerticalFilterBar | ||
| ? dashboardFiltersOpen | ||
| ? OPEN_FILTER_BAR_WIDTH // Use default open width for header calculation | ||
| : CLOSED_FILTER_BAR_WIDTH | ||
| : 0; |
There was a problem hiding this comment.
Header uses fixed width instead of actual resized filter bar width 
Tell me more
What is the issue?
The header max-width calculation uses a fixed OPEN_FILTER_BAR_WIDTH instead of the actual dynamic width when the filter bar is resizable.
Why this matters
When users resize the vertical filter bar, the header will still use the default width for its max-width calculation, potentially causing layout issues or incorrect spacing. The header should respond to the actual resized width, not just the default width.
Suggested change ∙ Feature Preview
The header should use the same dynamic width calculation as the filter bar itself. Consider passing the actual adjustedWidth from the ResizableSidebar to the header calculation, or use a shared state/ref to track the current filter bar width that both components can access.
Provide feedback to improve future suggestions
💬 Looking for more details? Reply to this comment to chat with Korbit.
| const showVerticalFilterBar = | ||
| showFilterBar && filterBarOrientation === FilterBarOrientation.Vertical; | ||
| const headerFilterBarWidth = showVerticalFilterBar | ||
| ? dashboardFiltersOpen | ||
| ? OPEN_FILTER_BAR_WIDTH // Use default open width for header calculation | ||
| : CLOSED_FILTER_BAR_WIDTH | ||
| : 0; |
There was a problem hiding this comment.
Unnecessary recalculation of filter bar width 
Tell me more
What is the issue?
The filter bar width calculation is performed on every render, even when the dependencies haven't changed.
Why this matters
This causes unnecessary computations on each render cycle, potentially impacting performance in components that re-render frequently, especially when dealing with complex dashboard layouts.
Suggested change ∙ Feature Preview
Wrap the filter bar width calculations in useMemo to memoize the results based on their dependencies:
const { showVerticalFilterBar, headerFilterBarWidth } = useMemo(() => {
const showVertical = showFilterBar && filterBarOrientation === FilterBarOrientation.Vertical;
const width = showVertical
? dashboardFiltersOpen
? OPEN_FILTER_BAR_WIDTH
: CLOSED_FILTER_BAR_WIDTH
: 0;
return { showVerticalFilterBar: showVertical, headerFilterBarWidth: width };
}, [showFilterBar, filterBarOrientation, dashboardFiltersOpen]);Provide feedback to improve future suggestions
💬 Looking for more details? Reply to this comment to chat with Korbit.
|
@bsovran @LevisNgigi is this the same PR as #35984? |
sadpandajoe
added
the
review:checkpoint
Yes @sadpandajoe it is similar to #35984 |
This seems to be targeting the same issue. Since the results appear to be the same I am happy to go with the pr opened already. |
Thank you @bsovran |
|
Closing as a duplicate |
sadpandajoe
removed
the
review:checkpoint
3 participants
SUMMARY
Fixed horizontal overflow issue in dashboard headers when the vertical native filter bar is open or closed. Previously, the dashboard header used a fixed
max-width: 100vwwhich didn't account for the filter bar width, causing tab content and other header elements to extend beyond the viewport and create horizontal scrollbars.Key Changes:
StyledHeadercomponent to dynamically calculatemax-widthbased on filter bar stateOPEN_FILTER_BAR_WIDTH: 260px,CLOSED_FILTER_BAR_WIDTH: 32px) for consistencyBehavior:
max-width: calc(100vw - 260px)max-width: calc(100vw - 32px)max-width: 100vw(unchanged)BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
Before: Dashboard header tabs overflow horizontally when vertical filter bar is present, creating unwanted scrollbars
Screen.Recording.2025-11-04.at.12.08.20.PM.mov
After: Dashboard header content properly constrains within available viewport width, accounting for filter bar space
Screen.Recording.2025-11-04.at.12.05.29.PM.mov
TESTING INSTRUCTIONS
max-width: 100vwbehavior is preserved (no regression)ADDITIONAL INFORMATION