From ebccab17ba7354e37223ed1b630d86ac74b1f5b1 Mon Sep 17 00:00:00 2001 From: Apollo Date: Tue, 21 Jul 2026 01:34:28 -0700 Subject: [PATCH] fix(ui): make [hidden] beat class display rules so the Board card actually hides The #2 data-optional wiring set hidden=true in JS, but .metric{display:flex} (class specificity 0,1,0) beat the UA [hidden] default (0,0,0), so the Board card stayed visible with a dead --deg on the live NAS. Add a global [hidden]{display:none!important} rule + a UI-contract regression test. --- app/static/style.css | 7 +++++++ tests/test_ui_contract.py | 10 ++++++++++ 2 files changed, 17 insertions(+) diff --git a/app/static/style.css b/app/static/style.css index 6fc848a..e4bd24d 100644 --- a/app/static/style.css +++ b/app/static/style.css @@ -19,6 +19,13 @@ box-sizing: border-box; } +/* The `hidden` attribute must always win — class rules like `.metric { display: flex }` + otherwise beat the UA `[hidden]` default (specificity 0,1,0 vs 0,0,0), leaving + data-optional cards (e.g. Board when Redfish reports no temp) stuck visible. */ +[hidden] { + display: none !important; +} + html, body { width: 100%; diff --git a/tests/test_ui_contract.py b/tests/test_ui_contract.py index b83eb58..9647fee 100644 --- a/tests/test_ui_contract.py +++ b/tests/test_ui_contract.py @@ -57,6 +57,16 @@ def test_mobile_css_prevents_390px_horizontal_overflow(): assert "minmax(0, 1fr)" in css +def test_hidden_attribute_beats_class_display_rules(): + # data-optional cards (e.g. Board when Redfish has no temp) set hidden=true in JS; + # without this rule .metric{display:flex} wins on specificity and the card stays + # visible. Regression guard for the live bug where Board showed a dead --deg. + css = read("app/static/style.css") + + assert "[hidden]" in css + assert "display: none !important" in css + + def test_dashboard_formats_missing_values_and_machine_reasons_for_people(): javascript = read("app/static/js/dashboard.js")