fix: updated dropdown's bg for better readability over bright bg

[meezumi]

Fix dropdown readability in dark theme over bright backgrounds

Problem

In dark theme, dropdowns wrapped by OverlayContainer had poor readability when displayed over bright/white backgrounds. The issue was caused by theme.background.transparent.primary having only 50% opacity, which didn't provide sufficient contrast against bright backgrounds even with the blur effect applied.

Solution

Changed the background property in OverlayContainer from theme.background.transparent.primary to theme.background.overlayPrimary.

Before

background: ${({ theme }) => theme.background.transparent.primary};

After

background: ${({ theme }) => theme.background.overlayPrimary};

Testing

Technical Details

The overlayPrimary background provides better contrast across both themes:

• Dark theme: RGBA(gray100, 0.8) - 80% opacity white overlay for better contrast over bright backgrounds
• Light theme: RGBA(gray80, 0.8) - 80% opacity dark overlay for consistent contrast

Files Changed

• packages/twenty-front/src/modules/ui/layout/overlay/components/OverlayContainer.tsx

The change ensures that dropdown content remains clearly readable regardless of what's behind it, while maintaining the aesthetic blur effect. Test by:

1. Switch to dark theme
2. Open a dropdown over a bright/white background image or element
3. Verify that dropdown content is clearly readable
4. Test in light theme to ensure no regression

Fixes #11916

[github-actions]

🚀 Preview Environment Ready!

Your preview environment is available at: http://bore.pub:46440

This environment will automatically shut down when the PR is closed or after 5 hours.

[prastoin]

Hello there, thanks for your contribution.
Please do not commit unrelated changes to the issue

[prastoin]

Remark: Please remove

[meezumi]

sure, sorry about that

[github-actions]

Welcome!

Hello there, congrats on your first PR! We're excited to have you contributing to this project.
By submitting your Pull Request, you acknowledge that you agree with the terms of our Contributor License Agreement.

Generated by 🚫 dangerJS against 5be40e1