mutmut
30. August 2026 um 11:06
1
Wenn man auf die ... in der Dashboard-Leiste klickt, finde ich, dass die Deckkraft nicht stark genug ist, um die Lesbarkeit zu gewährleisten, da man zu viel von dem darunter liegenden Inhalt sieht.
Auf mobilen Geräten beträgt die Deckkraft 100%:
Hallo zusammen!
Dieses Thema ist nun in Entwicklung .
Ein PR wurde eröffnet, um das Menü « … » der Dashboard-Leiste auf dem Desktop über den Karten lesbar zu machen:
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)_
## Summary by CodeRabbit
* **Style**
* Improved the dashboard tab bar’s glass effect for better visual layering.
* Updated overflow menus with a denser surface, including dark mode support.
* Refined menu hover styling for improved contrast.
Zögert nicht, dem PR zu folgen, zu testen (optional, vor allem bei kleinen Anfragen) und euer Feedback hier zu hinterlassen, falls nötig.
