bsovran opened a new pull request, #35989: URL: https://github.com/apache/superset/pull/35989
### 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: 100vw` which 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:** - Updated `StyledHeader` component to dynamically calculate `max-width` based on filter bar state - Uses existing constants (`OPEN_FILTER_BAR_WIDTH: 260px`, `CLOSED_FILTER_BAR_WIDTH: 32px`) for consistency **Behavior:** - **Vertical filter bar open**: `max-width: calc(100vw - 260px)` - **Vertical filter bar closed**: `max-width: calc(100vw - 32px)` - **Horizontal filter bar or no filters**: `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 https://github.com/user-attachments/assets/52395930-99a5-4279-8200-6eb98c8110fe **After:** Dashboard header content properly constrains within available viewport width, accounting for filter bar space https://github.com/user-attachments/assets/c1a2c5df-d30d-464e-84c8-2f3fdc232576 ### TESTING INSTRUCTIONS 1. **Setup**: Navigate to a dashboard with native filters enabled 2. **Test vertical filter bar closed**: - Ensure vertical filter bar is in collapsed state (32px width) - Verify dashboard header/tabs don't overflow horizontally - Check that long tab names wrap or truncate appropriately 3. **Test vertical filter bar open**: - Expand the vertical filter bar (260px width) - Verify header content adjusts and stays within viewport bounds - Toggle filter bar open/closed and confirm smooth layout transitions 4. **Test horizontal filter bar**: - Switch to horizontal filter bar orientation - Verify `max-width: 100vw` behavior is preserved (no regression) 5. **Test responsive behavior**: - Test at various screen sizes (mobile, tablet, desktop) - Ensure layout remains stable across different viewport widths 6. **Test edge cases**: - Dashboards with many long tab names - Dashboards with no native filters (should be unchanged) - Edit mode with builder panel open ### ADDITIONAL INFORMATION <!--- Check any relevant boxes with "x" --> <!--- HINT: Include "Fixes #nnn" if you are fixing an existing issue --> - [ ] Has associated issue: - [ ] Required feature flags: - [X] Changes UI - [ ] Includes DB Migration (follow approval process in [SIP-59](https://github.com/apache/superset/issues/13351)) - [ ] Migration is atomic, supports rollback & is backwards-compatible - [ ] Confirm DB migration upgrade and downgrade tested - [ ] Runtime estimates and downtime expectations provided - [ ] Introduces new feature or API - [ ] Removes existing feature or API -- 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]
