# Barre des dashboards : augmenter l'opacité du menu drop-down en desktop

**URL:** <https://community.gladysassistant.com/t/barre-des-dashboards-augmenter-lopacite-du-menu-drop-down-en-desktop/10764>\
**Category:** Configuration\
**Tags:** v5\
**Created:** [Août 30, 2026, 11:06 UTC](https://community.gladysassistant.com/t/barre-des-dashboards-augmenter-lopacite-du-menu-drop-down-en-desktop/10764 "2026-08-30T11:06:54Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![mutmut](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/mutmut/32/14064_2.png) [@mutmut](https://community.gladysassistant.com/u/mutmut)\
**Post date:** [Août 30, 2026, 11:06 UTC](https://community.gladysassistant.com/t/barre-des-dashboards-augmenter-lopacite-du-menu-drop-down-en-desktop/10764/1 "2026-08-30T11:06:54Z")

</div>

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.

 ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/7/3/73bddbcf90922ea68009d8e844c0b38e30b32813.png)

En mobile, l’opacité est à 100% :

 ![image](https://gladys-assistant-community.b-cdn.net/uploads/default/original/3X/a/9/a95cf8d616bc3a9cd659917280e349514a57f081.png)

---

<div class="post-metadata">

**Author:** ![cursor-bot](https://gladys-assistant-community.b-cdn.net/user_avatar/community.gladysassistant.com/cursor-bot/32/22252_2.png) [@cursor-bot](https://community.gladysassistant.com/u/cursor-bot)\
**Post date:** [Septembre 4, 2026, 8:12 UTC](https://community.gladysassistant.com/t/barre-des-dashboards-augmenter-lopacite-du-menu-drop-down-en-desktop/10764/2 "2026-09-04T08:12:48Z")

</div>

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 :

> <https://github.com/GladysAssistant/Gladys/pull/3071>
>
> \### 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.