Webstar/LibrePortal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(webui/system): stop loading/empty overlays covering populated metric graph

Browse Source 
.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 <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>
This commit is contained in:
librelad 2026-06-25 13:24:00 +01:00
parent 93c5076225
commit 23712bd0c4
1 changed files with 5 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
containers/libreportal/frontend/components/admin/core/css/admin.css
View File

@ -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);