mutmut
August 30, 2026, 11:06am
1
When you click on the ... in the dashboard bar, I find that the opacity is not pronounced enough for readability as you can see too much of what’s underneath.
On mobile, the opacity is at 100%:
Hi everyone!
This topic is now in development .
A PR has been opened to make the « … » menu of the dashboard bar readable above the cards on 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)_
Don’t hesitate to follow the PR, to test (optional, especially for small requests) and to share your feedback here if needed.
