Skip to content

fix(dashboard): allow filter list to scroll in filter config modal sidebar#39203

Merged
betodealmeida merged 3 commits intoapache:masterfrom
mikebridge:sc-101839-filter-modal-list-scroll
Apr 10, 2026
Merged

fix(dashboard): allow filter list to scroll in filter config modal sidebar#39203
betodealmeida merged 3 commits intoapache:masterfrom
mikebridge:sc-101839-filter-modal-list-scroll

Conversation

@mikebridge
Copy link
Copy Markdown
Contributor

@mikebridge mikebridge commented Apr 8, 2026 •
edited
Loading

SUMMARY

The "Add or edit filters" modal's left sidebar did not scroll when the dashboard had many filters (~10 to 20+), making bottom filters unreachable. Two CSS issues combined:

  1. The parent height chain through BaseModalBody / antd Form did not propagate height: 100% to StyledSidebarFlex, so the sidebar grew to fit its content with no upper bound.
  2. The inner Collapse with flex: 1; overflow: auto could not shrink because flex items default to min-height: auto, which refuses to go below content size.

CHANGES

  • Add max-height: 70vh to StyledSidebarFlex to give it a real upper bound regardless of the parent chain.
  • Add min-height: 0 to BaseStyledCollapse so the flex item can shrink to fit, allowing overflow: auto to actually scroll.

Both rules are accompanied by explanatory comments referencing the ticket and the underlying flexbox quirk.

(see also: Why don't flex items shrink past content size?)

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:

Screenshot 2026-04-07 at 4 40 01 PM

After:

Screenshot 2026-04-07 at 4 45 39 PM

TESTING INSTRUCTIONS

With Example data:

  1. Open Superset (http://localhost:8088/)
  2. Navigate to Dashboards → open Sales Dashboard
  3. In the filter bar (left side), click the gear icon (⚙️ ) to open the Add or edit filters and controls modal
  4. The modal will open with a left panel showing existing filters and a right panel for editing
  5. Click the + New button
  6. Add a new filter:
    • Pick any filter type (e.g., "Value")
    • Pick any dataset and column (e.g., the existing dataset and a column)
    • Give it a generic name like "Test 1"
    • Click Save
  7. Repeat steps 5-6 until you exceed the height of the screen.
  8. Expected: a scrollbar appears so that you can scroll all the way to the end of the list

ADDITIONAL INFORMATION

  • Has associated issue: 101839
  • Required feature flags:
  • Changes UI
  • Includes DB Migration (follow approval process in SIP-59)
    • 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

@mikebridge mikebridge marked this pull request as ready for review April 8, 2026 16:52
@dosubot dosubot Bot added change:frontend Requires changing the frontend dashboard:native-filters Related to the native filters of the Dashboard labels Apr 8, 2026
@bito-code-review
Copy link
Copy Markdown
Contributor

bito-code-review Bot commented Apr 8, 2026 •
edited
Loading

Code Review Agent Run #97dddf

Actionable Suggestions - 0
Review Details
  • Files reviewed - 1 · Commit Range: c8db55c..c8db55c
    • superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/ConfigModalSidebar/ConfigModalSidebar.tsx
  • Files skipped - 0
  • Tools
    • Whispers (Secret Scanner) - ✔︎ Successful
    • Detect-secrets (Secret Scanner) - ✔︎ Successful
Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

  • /review - Manually triggers a full AI review.

  • /pause - Pauses automatic reviews on this pull request.

  • /resume - Resumes automatic reviews.

  • /resolve - Marks all Bito-posted review comments as resolved.

  • /abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

AI Code Review powered by Bito Logo

@eschutho eschutho added the 🎪 ⚡ showtime-trigger-start Create new ephemeral environment for this PR label Apr 8, 2026
@github-actions github-actions Bot removed the 🎪 ⚡ showtime-trigger-start Create new ephemeral environment for this PR label Apr 8, 2026
@codecov
Copy link
Copy Markdown

codecov Bot commented Apr 8, 2026 •
edited
Loading

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 64.40%. Comparing base (e9911fb) to head (982d609).
⚠️ Report is 4 commits behind head on master.

Additional details and impacted files 
@@           Coverage Diff           @@
##           master   #39203   +/-   ##
=======================================
  Coverage   64.40%   64.40%           
=======================================
  Files        2553     2553           
  Lines      132558   132558           
  Branches    30746    30746           
=======================================
  Hits        85377    85377           
  Misses      45695    45695           
  Partials     1486     1486
Flag Coverage Δ
javascript 66.09% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@netlify
Copy link
Copy Markdown

netlify Bot commented Apr 9, 2026 •
edited
Loading

✅ Deploy Preview for superset-docs-preview ready!

Name Link
🔨 Latest commit 982d609
🔍 Latest deploy log https://app.netlify.com/projects/superset-docs-preview/deploys/69d937ff139ff000085918be
😎 Deploy Preview https://deploy-preview-39203--superset-docs-preview.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@bito-code-review
Copy link
Copy Markdown
Contributor

bito-code-review Bot commented Apr 9, 2026 •
edited
Loading

Code Review Agent Run #a22aaf

Actionable Suggestions - 0
Review Details
  • Files reviewed - 1 · Commit Range: c8db55c..0f182b1
    • superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/ConfigModalSidebar/ConfigModalSidebar.tsx
  • Files skipped - 0
  • Tools
    • Whispers (Secret Scanner) - ✔︎ Successful
    • Detect-secrets (Secret Scanner) - ✔︎ Successful
Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

  • /review - Manually triggers a full AI review.

  • /pause - Pauses automatic reviews on this pull request.

  • /resume - Resumes automatic reviews.

  • /resolve - Marks all Bito-posted review comments as resolved.

  • /abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

AI Code Review powered by Bito Logo

@mikebridge mikebridge force-pushed the sc-101839-filter-modal-list-scroll branch from 0f182b1 to 85c919b Compare April 9, 2026 16:12
@bito-code-review
Copy link
Copy Markdown
Contributor

bito-code-review Bot commented Apr 9, 2026 •
edited
Loading

Code Review Agent Run #b16825

Actionable Suggestions - 0
Review Details
  • Files reviewed - 1 · Commit Range: c302005..85c919b
    • superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/ConfigModalSidebar/ConfigModalSidebar.tsx
  • Files skipped - 0
  • Tools
    • Whispers (Secret Scanner) - ✔︎ Successful
    • Detect-secrets (Secret Scanner) - ✔︎ Successful
Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

  • /review - Manually triggers a full AI review.

  • /pause - Pauses automatic reviews on this pull request.

  • /resume - Resumes automatic reviews.

  • /resolve - Marks all Bito-posted review comments as resolved.

  • /abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

AI Code Review powered by Bito Logo

@bito-code-review
Copy link
Copy Markdown
Contributor

bito-code-review Bot commented Apr 10, 2026 •
edited
Loading

Code Review Agent Run #a43647

Actionable Suggestions - 0
Review Details
  • Files reviewed - 1 · Commit Range: 85c919b..9431a75
    • superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/ConfigModalSidebar/ConfigModalSidebar.tsx
  • Files skipped - 0
  • Tools
    • Whispers (Secret Scanner) - ✔︎ Successful
    • Detect-secrets (Secret Scanner) - ✔︎ Successful
Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

  • /review - Manually triggers a full AI review.

  • /pause - Pauses automatic reviews on this pull request.

  • /resume - Resumes automatic reviews.

  • /resolve - Marks all Bito-posted review comments as resolved.

  • /abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

AI Code Review powered by Bito Logo

Mike Bridge added 3 commits April 10, 2026 11:48
fix(dashboard): allow filter list to scroll in filter config modal si…
55a6121 
…debar

The "Add or edit filters" modal's left sidebar did not scroll when
the dashboard had many filters (~17+), making bottom filters
unreachable. Two CSS issues combined:

1. The parent height chain through BaseModalBody / antd Form did
   not propagate height: 100% to StyledSidebarFlex, so the sidebar
   grew to fit its content with no upper bound.
2. The inner Collapse with flex: 1; overflow: auto could not
   shrink because flex items default to min-height: auto, which
   refuses to go below content size.

Fix:
- Add max-height: 70vh to StyledSidebarFlex to give it a real
  upper bound regardless of the parent chain.
- Add min-height: 0 to BaseStyledCollapse so the flex item can
  shrink to fit, allowing overflow: auto to actually scroll.

Both rules are accompanied by explanatory comments referencing the
ticket and the underlying flexbox quirk.
sc-101839: drop speculative TODO about future height-chain refactor
c5c20bd 
The TODO suggested replacing the max-height workaround with a full
height: 100% chain repair. After investigation, that fix would require
modifying BaseForm in SharedStyles.tsx and ErrorBoundary, both shared
across many modals — too broad a blast radius for this P2 cosmetic
ticket. Removed the TODO to avoid implying it as planned work.
sc-101839: drop ticket references from inline CSS comments
982d609 
The 'see sc-101839' breadcrumbs in the BaseStyledCollapse comment are
not load-bearing — the explanation of why min-height: 0 is needed is
self-contained. Drop the ticket-specific references so future readers
focus on the rationale rather than the ticket history.
@mikebridge mikebridge force-pushed the sc-101839-filter-modal-list-scroll branch from 9431a75 to 982d609 Compare April 10, 2026 17:48
@bito-code-review
Copy link
Copy Markdown
Contributor

bito-code-review Bot commented Apr 10, 2026 •
edited
Loading

Code Review Agent Run #59f74d

Actionable Suggestions - 0
Review Details
  • Files reviewed - 1 · Commit Range: 55a6121..982d609
    • superset-frontend/src/dashboard/components/nativeFilters/FiltersConfigModal/ConfigModalSidebar/ConfigModalSidebar.tsx
  • Files skipped - 0
  • Tools
    • Whispers (Secret Scanner) - ✔︎ Successful
    • Detect-secrets (Secret Scanner) - ✔︎ Successful
Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

  • /review - Manually triggers a full AI review.

  • /pause - Pauses automatic reviews on this pull request.

  • /resume - Resumes automatic reviews.

  • /resolve - Marks all Bito-posted review comments as resolved.

  • /abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

AI Code Review powered by Bito Logo

@betodealmeida betodealmeida merged commit 7a243d3 into apache:master Apr 10, 2026
72 checks passed
michael-s-molina pushed a commit that referenced this pull request Apr 13, 2026
@mikebridge @michael-s-molina
fix(dashboard): allow filter list to scroll in filter config modal si…
81ecb7f 
…debar (#39203)

Co-authored-by: Mike Bridge <michael.bridge@ext.preset.io>
(cherry picked from commit 7a243d3)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@eschutho eschutho eschutho left review comments

@betodealmeida betodealmeida betodealmeida approved these changes

Assignees

No one assigned

Labels

change:frontend Requires changing the frontend dashboard:native-filters Related to the native filters of the Dashboard size/S

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@mikebridge @betodealmeida @eschutho