From 23712bd0c4f0339e6e46d64d1ca7376f5d3b730a Mon Sep 17 00:00:00 2001 From: librelad Date: Thu, 25 Jun 2026 13:24:00 +0100 Subject: [PATCH] fix(webui/system): stop loading/empty overlays covering populated metric graph MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit .sys-detail-loading and .sys-detail-empty are absolutely-positioned overlays that JS shows/hides via the `hidden` attribute. Their .sys-detail-* rule sets `display: flex`, an author declaration that overrides the UA `[hidden] { display: none }` — so `el.hidden = true` never actually hid them. Both the 'Loading history…' and 'No samples in this range yet' overlays stayed painted on top of a fully-populated chart (overlapping into garbled text). Add `.sys-detail-loading[hidden], .sys-detail-empty[hidden] { display: none }` (higher specificity than the bare class) so the hidden attribute wins. Co-Authored-By: Claude Opus 4.8 Signed-off-by: librelad --- .../libreportal/frontend/components/admin/core/css/admin.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/containers/libreportal/frontend/components/admin/core/css/admin.css b/containers/libreportal/frontend/components/admin/core/css/admin.css index 2e338ee..0c53599 100644 --- a/containers/libreportal/frontend/components/admin/core/css/admin.css +++ b/containers/libreportal/frontend/components/admin/core/css/admin.css @@ -659,6 +659,11 @@ table.sys-apps tr:hover td { background: rgba(var(--text-rgb), 0.03); } pointer-events: none; } .sys-detail-empty { color: rgba(var(--text-rgb), 0.55); } +/* The `display: flex` above is an author rule, so it beats the UA + `[hidden] { display: none }` — without this the JS `el.hidden = true` can't + hide these overlays and they stack on top of a populated graph. */ +.sys-detail-loading[hidden], +.sys-detail-empty[hidden] { display: none; } .sys-detail-grid { stroke: rgba(var(--text-rgb), 0.07);