Quand on clique sur les ... de la barre des dashboards, je trouve que l’opacité n’est pas assez prononcé pour la lisibilité car on voit trop ce qui est dessous.
En mobile, l’opacité est à 100% :
Salut tout le monde !
Ce sujet est désormais en cours de développement .
Une PR a été ouverte pour rendre le menu « … » de la barre des dashboards lisible au-dessus des cartes en desktop :
master ← claude/dashboard-dropdown-opacity-l5h992
ouvert 08:11AM - 04 Sep 26 UTC
### Description
Forum feedback: on desktop, the "…" overflow menu of the dashbo… ard bar lets the cards' text show through, crisp, while the very same menu looks opaque on mobile. Both use the same CSS (78% white + a 28px backdrop blur).
**Root cause: the menu's blur was a silent no-op on Chromium.** The menu is a DOM descendant of the pill bar, which carries its own `backdrop-filter`. Per the Filter Effects spec (implemented strictly by Chromium), an element with `backdrop-filter` is a *backdrop root*: the `backdrop-filter` of a descendant only samples what is painted inside that ancestor, never the page behind it. So on Chrome/Edge the menu was a plain 78% white veil over the cards. Safari does not isolate, which is why the iOS screenshot in the topic looks fine. Reproduced in headless Chromium with a minimal page (same structure, same values) before touching the app.
**Fix** (CSS only, `front/src/routes/dashboard/style.css`):
- The bar's frost (background + blur) is painted by a `::before` layer instead of the bar itself, so the menu is no longer nested under a backdrop root and its own blur works. The bar already had the `position: relative; z-index: 10` stacking context the layer needs.
- The menu gets a dedicated, near-opaque glass token (`--gl-popover-bg`, 94% white) so it stays readable over any content, with or without `backdrop-filter` support (old wall tablets).
- Hover on a menu item becomes an ink tint instead of more white, which was invisible on the denser panel.
Checked in headless Chromium against the demo dashboard, before/after: on desktop the chips' text under the menu ("Disarmed", "Dinner with Pepper…") is now blurred away instead of showing through. The mobile dock (scrollable pill track + upward menu) and dark mode render correctly with the new frost layer.
## Forum
Forum: https://community.gladysassistant.com/t/barre-des-dashboards-augmenter-lopacite-du-menu-drop-down-en-desktop/10764
### Checklist
- [x] Tests pass: no server change; Cypress not run (CSS-only change, checked visually in Chromium at desktop and mobile widths, light and dark mode)
- [x] Linter and prettier pass on both front and server (prettier checked on the changed stylesheet)
- [x] No undocumented breaking change
🤖 Generated with [Claude Code](https://claude.com/claude-code)
https://claude.ai/code/session_01PR53sq1y12LRaQHeQP3Aj6
---
_Generated by [Claude Code](https://claude.ai/code/session_01PR53sq1y12LRaQHeQP3Aj6)_
N’hésitez pas à suivre la PR, à tester (optionnel, surtout pour les petites demandes) et à faire vos retours ici si besoin.
