Dropdown's background being transparent leads to poor text contrast

[twenty-eng-sync]

Description

Generated from note: Reproduction

Dropdowns are often displayed on top of black elements in dark mode. The contrast is good in these cases.

However, dropdowns can sometimes be displayed on top of light elements, even in dark mode. This can happen when editing a note and uploading a white image or video.

Ensuring good contrast for text displayed on top of an uncontrolled background is really hard, and I bet that's why many apps use solid backgrounds for dropdowns.

Dark mode

CleanShot.2025-05-07.at.11.39.47.mp4

Light mode

Found in a bug reported by Paul: #11900 (comment)

Created by:

[Bonapara]

Seems there is no blur on rich text one?
Second screen should not be possible (the menu should not open above the modal)

[Bonapara]

Let's add a background blur behind the menu like we do on the filter/sort views menus.

[adisagar2003]

Hello, can you assign this to me?

[Bonapara]

Hey @adisagar2003, please have a go!

[prateekbisht23]

can I try fixing it!!

[ahmedobaid23]

Hey @Bonapara,

I checked the implementation, the dropdown is indeed wrapped by the OverlayContainer, similar to how filter/sort menus are structured. This applies the expected backdrop-filter: blur(...), and we can see that text and the image behind the dropdown is blurred correctly.

However, in cases where there's a white or bright image behind, the blur effect makes the dropdown content hard to read or visually unclear.

Do you have any guidance on how to approach this issue?

[TheHarshitBansal]

@Bonapara Hey, can I work on this issue?

[Bonapara]

You can raise a PR if you’d like. Thanks for contributing, @TheHarshitBansal.