fix(DetailsPanel): Applied filters colors

[msyavuz]

SUMMARY

Applied filters color is changed on a recent theming pr, this one fixes it and also implements a scrollable applied filters display.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:

After:

With a lot of filters:

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

• Has associated issue: Fixes Improve UI for "Applied Filters" List #34610
• 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]

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

[msyavuz]

@kasiazjc What do you think about the scrollable container? After which point we should make it scroll instead of grow?

[kasiazjc]

@kasiazjc What do you think about the scrollable container? After which point we should make it scroll instead of grow?

looks great! in general for the popover I think it will be displayed bottom or top of the trigger icon, based on the scroll location of the user right?

I would just make sure that it always is displayed at the top of the other components (likefilter bar or nav bar) and there is top and bottom margin of 36px so that it doesn't touch the window (browser) edges. If the height is reached enable internal scroll

[korbit-ai]

Review by Korbit AI

Korbit automatically attempts to detect when you fix issues in new commits.

Category	Issue	Status
	Missing overflow handling for FiltersContainer height limit ▹ view	🧠 Not in scope
	Inefficient List Rendering ▹ view	🧠 Not in standard

Files scanned

​

File Path	Reviewed
superset-frontend/src/dashboard/components/FiltersBadge/Styles.tsx	✅
superset-frontend/src/dashboard/components/FiltersBadge/DetailsPanel/index.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.

Loving Korbit!? Share us on LinkedIn Reddit and X