mutmut
30 Agosto, 2026 11:06
1
Cuando se hace clic en los ... de la barra de los dashboards, creo que la opacidad no es lo suficientemente pronunciada para la legibilidad, ya que se ve demasiado lo que hay debajo.
En móvil, la opacidad es del 100%:
¡Hola a todos!
Este tema ahora está en desarrollo .
Se ha abierto una PR para hacer que el menú « … » de la barra de los dashboards sea legible por encima de las tarjetas en escritorio:
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.
No duden en seguir la PR, probar (opcional, especialmente para pequeñas solicitudes) y dar sus comentarios aquí si es necesario.
