langgenius/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-07-20 19:50:06 -04:00
Code Issues 775 Packages Projects Releases 10 Wiki Activity

[PR #24454] fix: add backdrop-blur-sm to plugin dropdown filters for consistent dark mode styling #30644

New Issue
Closed
opened 2026-02-21 20:47:56 -05:00 by yindo · 0 comments
yindo commented 2026-02-21 20:47:56 -05:00
Owner
Copy Link
Copy Source

Original Pull Request: https://github.com/langgenius/dify/pull/24454

State: closed
Merged: Yes

Fixes #24453

Summary

This PR adds the missing backdrop-blur-sm CSS class to plugin dropdown filters to ensure consistent styling and prevent background content overlap in dark mode.

Changes

  • marketplace/search-box/tags-filter.tsx: Added backdrop-blur-sm to dropdown panel
  • plugin-page/filter-management/category-filter.tsx: Added backdrop-blur-sm to dropdown panel
  • plugin-page/filter-management/tag-filter.tsx: Added backdrop-blur-sm to dropdown panel
  • update-plugin/plugin-version-picker.tsx: Added backdrop-blur-sm to dropdown panel

Problem

In dark mode, these dropdown filters were using only bg-components-panel-bg-blur (95% opacity) without the backdrop-blur-sm effect. This caused:

  • Background content to show through the dropdown
  • Text overlap when scrolling content appeared behind the dropdown
  • Inconsistent styling compared to other similar dropdowns in the codebase

Solution

Added backdrop-blur-sm to maintain visual consistency with other dropdown components that use both bg-components-panel-bg-blur and backdrop-blur-sm together.

Screenshots

Before After
image image

Checklist

  • This change requires a documentation update, included: Dify Document
  • I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!)
  • I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change.
  • I've updated the documentation accordingly.
  • I ran dev/reformat(backend) and cd web && npx lint-staged(frontend) to appease the lint gods
**Original Pull Request:** https://github.com/langgenius/dify/pull/24454 **State:** closed **Merged:** Yes --- Fixes #24453 ## Summary This PR adds the missing `backdrop-blur-sm` CSS class to plugin dropdown filters to ensure consistent styling and prevent background content overlap in dark mode. ## Changes - **marketplace/search-box/tags-filter.tsx**: Added `backdrop-blur-sm` to dropdown panel - **plugin-page/filter-management/category-filter.tsx**: Added `backdrop-blur-sm` to dropdown panel - **plugin-page/filter-management/tag-filter.tsx**: Added `backdrop-blur-sm` to dropdown panel - **update-plugin/plugin-version-picker.tsx**: Added `backdrop-blur-sm` to dropdown panel ## Problem In dark mode, these dropdown filters were using only `bg-components-panel-bg-blur` (95% opacity) without the `backdrop-blur-sm` effect. This caused: - Background content to show through the dropdown - Text overlap when scrolling content appeared behind the dropdown - Inconsistent styling compared to other similar dropdowns in the codebase ## Solution Added `backdrop-blur-sm` to maintain visual consistency with other dropdown components that use both `bg-components-panel-bg-blur` and `backdrop-blur-sm` together. ## Screenshots | Before | After | |--------|-------| |<img width="484" height="291" alt="image" src="https://github.com/user-attachments/assets/62f4f1ea-8827-4c9f-be76-84904a9de198" />|<img width="719" height="302" alt="image" src="https://github.com/user-attachments/assets/bcc3c5cf-464b-4eb5-8222-c32c9134cb06" />| ## Checklist - [ ] This change requires a documentation update, included: [Dify Document](https://github.com/langgenius/dify-docs) - [x] I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!) - [x] I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change. - [x] I've updated the documentation accordingly. - [x] I ran `dev/reformat`(backend) and `cd web && npx lint-staged`(frontend) to appease the lint gods
yindo added the pull-request label 2026-02-21 20:47:56 -05:00
yindo closed this issue 2026-02-21 20:47:57 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Knowledge Pipeline
Proposal
WIP
cloud
dependencies
feat:webapp
good first issue
outdated
performance
pull-request
Mirrored from GitHub Pull Request
 python:uv
refactor
size:L
stale
status: accepting prs
status: blocked
status: in discussion
stt & tts
vulnerablity
web
wont-fix
🌊 feat:workflow
🌚 invalid
🐞 bug
👻 feat:rag
💪 enhancement
📚 documentation
🔨 feat:tools
🙋‍♂️ question
🙏 help wanted
🤔 cant-reproduce
🤖 feat:agent
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#30644
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?