Skip to content

fix(dashboard): adjust vertical spacing for numerical range filter to prevent overlaps#36167

Merged
geido merged 1 commit into
masterfrom
enxdev/fix/dashboard-filters
Nov 20, 2025
Merged

fix(dashboard): adjust vertical spacing for numerical range filter to prevent overlaps#36167
geido merged 1 commit into
masterfrom
enxdev/fix/dashboard-filters

Conversation

@EnxDev
Copy link
Copy Markdown
Contributor

@EnxDev EnxDev commented Nov 18, 2025 •
edited
Loading

SUMMARY

Fixes a spacing issue caused in #35782 by the AntD version bump, in vertical dashboard filter bars, where the numerical range filter’s help text overlapped with the filters below it.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

  • Before
before-1
  • After
after-1
  • Before
before-2
  • After
after-2
  • Before
before-3
  • After
after-3

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

  • Has associated issue:
  • 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

@korbit-ai
Copy link
Copy Markdown

korbit-ai Bot commented Nov 18, 2025

Based on your review schedule, I'll hold off on reviewing this PR until it's marked as ready for review. If you'd like me to take a look now, comment /korbit-review.

Your admin can change your review schedule in the Korbit Console

@EnxDev EnxDev marked this pull request as ready for review November 18, 2025 18:16
@dosubot dosubot Bot added change:frontend Requires changing the frontend dashboard:native-filters Related to the native filters of the Dashboard labels Nov 18, 2025
@EnxDev EnxDev added the 🎪 ⚡ showtime-trigger-start Create new ephemeral environment for this PR label Nov 18, 2025
@github-actions github-actions Bot added 🎪 e0e2b1d 🚦 building and removed 🎪 ⚡ showtime-trigger-start Create new ephemeral environment for this PR labels Nov 18, 2025
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Nov 18, 2025

🎪 Showtime is building environment on GHA for e0e2b1d

Copilot AI reviewed Nov 18, 2025
View reviewed changes
Copy link
Copy Markdown
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR fixes a vertical spacing issue in dashboard filter bars where the numerical range filter help text overlapped with filters below it. The solution involves refactoring how help messages are displayed in the Range filter plugin and adding CSS rules to increase spacing for form items with additional content.

Key Changes

  • Refactored MessageDisplay to getFormItemExtraMessage in RangeFilterPlugin to use Ant Design's FormItem extra prop
  • Added CSS rule for vertical filter controls to increase margin for form items with .ant-form-item-additional class
  • Added basic test coverage for vertical and horizontal filter controls

Reviewed Changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.

File Description
RangeFilterPlugin.tsx Refactored message display to use FormItem's extra prop for better integration with Ant Design form layout
FilterControl.tsx Added CSS styling with media query to increase margin-bottom for form items with additional content in vertical orientation
FilterControl.test.tsx Added new test file with basic tests for vertical and horizontal filter control rendering

Comment thread ...t-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx Outdated
Comment thread ...t-frontend/src/dashboard/components/nativeFilters/FilterBar/FilterControls/FilterControl.tsx Outdated
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Nov 18, 2025

🎪 Showtime deployed environment on GHA for e0e2b1d

• Environment: http://44.248.71.16:8080 (admin/admin)
• Lifetime: 48h auto-cleanup
• Updates: New commits create fresh environments automatically

@EnxDev EnxDev marked this pull request as draft November 19, 2025 10:54
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Nov 19, 2025

🎪 Showtime is building environment on GHA for 0bcdd2a

@EnxDev EnxDev force-pushed the enxdev/fix/dashboard-filters branch from 0bcdd2a to a8614e3 Compare November 19, 2025 17:39
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Nov 19, 2025

🎪 Showtime is building environment on GHA for a8614e3

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Nov 19, 2025

🎪 Showtime deployed environment on GHA for 0bcdd2a

• Environment: http://44.252.14.247:8080 (admin/admin)
• Lifetime: 48h auto-cleanup
• Updates: New commits create fresh environments automatically

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Nov 19, 2025

🎪 Showtime deployed environment on GHA for a8614e3

• Environment: http://44.255.45.242:8080 (admin/admin)
• Lifetime: 48h auto-cleanup
• Updates: New commits create fresh environments automatically

alexandrusoare
alexandrusoare approved these changes Nov 20, 2025
View reviewed changes
Copy link
Copy Markdown
Contributor

@alexandrusoare alexandrusoare left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@geido
Copy link
Copy Markdown
Member

geido commented Nov 20, 2025

It seems we might have to revisit the spacing for the numerical range. The microcopy below it makes the next filter appear too close. IS that something that we can tackle in this PR?
515794353-be8615fa-c05d-47e2-8d93-61ec43ffd205

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Nov 20, 2025

🎪 Showtime is building environment on GHA for a8614e3

@EnxDev
Copy link
Copy Markdown
Contributor Author

EnxDev commented Nov 20, 2025

It seems we might have to revisit the spacing for the numerical range. The microcopy below it makes the next filter appear too close. IS that something that we can tackle in this PR?

I’ve updated the screenshots, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Copilot left review comments

@alexandrusoare alexandrusoare alexandrusoare approved these changes

@geido geido geido approved these changes

@kgabryje kgabryje Awaiting requested review from kgabryje

Assignees

No one assigned

Labels

🏷️ bot A label used by `supersetbot` to keep track of which PR where auto-tagged with release labels change:frontend Requires changing the frontend dashboard:native-filters Related to the native filters of the Dashboard size/XS v6.0 Label added by the release manager to track PRs to be included in the 6.0 branch 🍒 6.0.0 Cherry-picked to 6.0.0

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

5 participants

@EnxDev @geido @alexandrusoare @sadpandajoe