fix(dashboard): replace position:fixed on filter apply button with flex layout#39250
Closed
sadpandajoe wants to merge 8 commits into
Closed
fix(dashboard): replace position:fixed on filter apply button with flex layout#39250sadpandajoe wants to merge 8 commits into
sadpandajoe wants to merge 8 commits into
Conversation
…ex layout The filter bar's Apply button used position:fixed;bottom:0 which is fragile at high display scale factors (e.g. 150% on 1920x1080). At 150% OS scale the CSS viewport shrinks to 720px and the fixed button could be clipped or misaligned with the panel due to missing left anchor and subpixel rounding. Replace the approach with a proper flex layout: Bar now has an explicit height (scrollable-area height + filter-bar-header height), the scrollable content area uses flex:1/min-height:0 to fill remaining space, and the ActionButtons are a natural flex footer always visible at the bottom of the panel regardless of zoom level. Also removes the 108px padding-bottom hack from FilterControlsWrapper that was only needed to avoid content being hidden under the fixed button. Closes sc-101082 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Codecov Report❌ Patch coverage is
Additional details and impacted files@@ Coverage Diff @@
## master #39250 +/- ##
==========================================
+ Coverage 64.44% 64.62% +0.17%
==========================================
Files 2560 2558 -2
Lines 133574 133040 -534
Branches 31017 30919 -98
==========================================
- Hits 86082 85976 -106
+ Misses 45999 45575 -424
+ Partials 1493 1489 -4
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
sadpandajoe
commented
Apr 10, 2026
…ns, document barHeight - Replace window.getComputedStyle() position check (always passes in jsdom since jsdom does not apply emotion class-based CSS) with @emotion/jest toHaveStyleRule(), which reads from emotion's actual CSS rules - Add meaningful layout assertions: vertical container has display:flex and flex-direction:column; both orientations are confirmed to have no position:fixed - Add horizontal orientation test to cover the margin-left:auto layout path - Document the barHeight calculation assumption in Vertical.tsx: the `height` prop equals (100vh - FILTER_BAR_HEADER_HEIGHT - MAIN_HEADER_HEIGHT), so adding FILTER_BAR_HEADER_HEIGHT back gives the total panel height - Add comment to tabPaneStyle useMemo explaining the intentional empty deps Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
sadpandajoe
changed the title
…ply-button-scale # Conflicts: # superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/ActionButtons.test.tsx # superset-frontend/src/dashboard/components/nativeFilters/FilterBar/ActionButtons/index.tsx
sadpandajoe
added
the
🎪 ⚡ showtime-trigger-start
github-actions
Bot
added
🎪 2eb9926 🚦 building
Contributor
github-actions
Bot
added
🎪 2eb9926 🚦 deploying
Contributor
|
🎪 Showtime deployed environment on GHA for 2eb9926 • Environment: http://34.223.235.243:8080 (admin/admin) |
github-actions
Bot
added
🎪 7cb7e8d 🚦 running
Contributor
|
🎪 Showtime deployed environment on GHA for 7cb7e8d • Environment: http://16.147.40.138:8080 (admin/admin) |
autoAdjustOverflow was set to false during the Ant Design 5 migration (#31973) as a mechanical conversion, not a design decision. Enabling it lets Ant Design reposition the popover when it would extend beyond the viewport — critical when the time range filter trigger is near the bottom of the filter panel at 150% zoom. Combined with the max-height + scrollable content fix, this gives two layers of protection: repositioning first, then scrolling if still too tall. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
github-actions
Bot
added
🎪 1d4c394 🚦 building
Contributor
github-actions
Bot
added
🎪 1d4c394 🚦 deploying
Contributor
|
🎪 Showtime deployed environment on GHA for 1d4c394 • Environment: http://35.93.184.4:8080 (admin/admin) |
calc(100vh - 100px) gives 620px at 150% zoom on 1080p, leaving only 52px for positioning in a 720px viewport. 70vh gives 504px, leaving ~216px for Ant Design's autoAdjustOverflow to reposition the popover when the trigger is near the top or bottom of the screen. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Contributor
Contributor
|
🎪 Showtime deployed environment on GHA for 891753a • Environment: http://34.208.99.100:8080 (admin/admin) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
SUMMARY
The filter bar's Apply button used
position: fixed; bottom: 0which breaks at high display scalefactors (e.g. 150% on a 1920×1080 monitor). At 150% OS scale the CSS viewport shrinks and the
fixed-position button can be clipped or misaligned with the panel.
This replaces the fixed positioning with a proper flex layout:
Bargets an explicit height andoverflow: hidden, acting as the flex column containerflex: 1; min-height: 0; overflow: autoto fill remaining spaceActionButtonsbecomes a natural flex footer, always visible at the bottom regardless of zoom108px padding-bottomhack onFilterControlsWrapper(only needed to avoid contenthidden under the fixed button)
widthprop fromActionButtons(no longer needed without fixed positioning)Also fixes false-green tests: the old
getComputedStyleposition check always passed in jsdomsince jsdom doesn't apply emotion class-based CSS. Replaced with
@emotion/jesttoHaveStyleRuleassertions that read from emotion's actual CSS rules.
BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF
Before:
After:
Screen.Recording.2026-04-24.at.1.13.31.PM.mov
TESTING INSTRUCTIONS
positioned within the filter panel
ADDITIONAL INFORMATION