fix(ui): make the device notices legible - #3287
Merged
vpetersson merged 2 commits intoAug 16, 2026
Merged
Conversation
The storage notice was called out as unreadable on a real device. It was, and the under-voltage notice shared most of the causes, so both are fixed together. - .stat-card__meta--warn painted body text with --color-warning (#f59e0b), which on a white card measures 2.15:1 against the 4.5:1 AA needs. Body copy is no longer tinted at all: the card already spends colour on an icon and a coloured verdict, and a third pass over the sentence beneath bought no signal while costing legibility. That is the rule the banner's own stylesheet states and these cards were breaking - the Technical detail disclosures are gone. This is System Info, a page that exists to show exactly that; putting the evidence behind a click and painting it in the muted de-emphasis ink meant the prose carried the weight while the numbers someone opened the page for were hidden and greyed - both blocks were prose with monospace fragments embedded at 0.78rem, which read as mixed type and buried the one figure they exist for. They are now a two-column readout: labels in a fixed column, values sharing a left edge in a single monospace size - inline code no longer sets 0.95em. A monospace face set fractionally smaller than its surroundings reads as a mistake; the family already carries the distinction - the banner ran four prose sizes (17/15/14/11.2). "See details" now matches the body, leaving the title and the eyebrow as the only deliberate steps - that link was align-self: center, so it floated at the midpoint of a banner whose height varies with the copy, beside an arbitrary bullet. It is aligned to the title it belongs to Colour now appears once per card, and the muted ink is used for one thing: the closing line that explains a number rather than being one. Contrast was measured in the browser on a live device rather than eyeballed, before and after; every element of both notices now passes AA in every state. The .stat-card__meta--warn defect also affected the Power supply and low-RAM cards, which share the class. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
vpetersson
previously approved these changes
Aug 16, 2026
There was a problem hiding this comment.
Pull request overview
This PR improves the readability and scanability of System Info “device notice” content (storage health + under-voltage + low-RAM) by adjusting template markup and Sass styling, and updating the corresponding template-view test assertions.
Changes:
- Removes tinted warning styling from several
.stat-card__metaparagraphs and refactors the “Technical detail” areas into always-visible key/value readouts. - Adds new Sass styles for the readout layout and adjusts device-alert banner link alignment/typography.
- Updates the System Info template test to assert against the new readout wording and to normalize HTML before matching.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
tests/test_template_views.py |
Updates assertions to match new System Info storage evidence wording and collapses HTML for stable matching. |
src/anthias_server/app/templates/system_info.html |
Removes warning meta modifier from several paragraphs and replaces <details> disclosures with structured <dl> readouts. |
src/anthias_server/app/static/sass/_styles.scss |
Updates warning/meta styling, introduces .readout/.readout__note styling, and adjusts device-alert banner link layout. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #3287 +/- ##
=========================================
Coverage ? 90.29%
=========================================
Files ? 84
Lines ? 9920
Branches ? 1097
=========================================
Hits ? 8957
Misses ? 709
Partials ? 254 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
All four hold up. - .readout__note lost to `.stat-card__details p`: (0,1,0) against (0,1,1), so its margin silently resolved to --space-2 instead of --space-3. Scoped under the same parent, and verified in the browser that the computed margin is now 12px rather than 8px. Same specificity trap that made an earlier .device-alerts rule dead code, which I should have looked for here - a blanket replace stripped stat-card__meta--warn from the low-RAM badge along with the two cards it was aimed at, contradicting the PR description and leaving the class as dead CSS. Restored: unlike the Power supply and Storage cards, the badge has no coloured verdict above it, so its icon, bold lead-in and tint are the whole signal - two comments still described the previous design: one said the readout sits behind a disclosure, which it no longer does, and the modifier's comment still listed cards that no longer use it The stale comments matter more than usual in this file, since the reasoning is carried in them rather than being obvious from the rules. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
|
vpetersson
approved these changes
Aug 16, 2026
a10kiloham
pushed a commit
to a10kiloham/Anthias
that referenced
this pull request
Aug 16, 2026
) Brings in the 12 upstream commits past the previous merge point (936e7d8): the HDMI-CEC kernel-uABI rewrite + display schedule, storage-failure and under-voltage UI warnings, the netifaces → stdlib rtnetlink swap, the Menu Board array-settings fix, legible device notices, and dependency/release-metadata bumps. Conflict resolutions keep the fork's pipeline off upstream infra: - balena workflow/scripts/compose templates stay deleted (upstream had added proxy support to them) - docker-build.yaml: upstream's new ghcr.io/screenly attestation steps dropped — the fork attests its Docker Hub images only — and the stale permissions comment now describes the fork's registries (robkanthias images, ghcr.io/a10kiloham build cache) Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Lj68wwqa2HNBkiViDKBdQ5
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Issues Fixed
No tracking issue. Follow-up to PR 3286: the storage notice it added was called out as unreadable once it was on a real screen. It was, and the under-voltage notice shared most of the causes, so both are fixed together.
Description
The measurement that started it.
.stat-card__meta--warnpainted body text with--color-warning(#f59e0b), which on a white.stat-cardmeasures 2.15:1 against the 4.5:1 WCAG AA needs for body text. The verdict heading directly above it measures 9.15:1, so the accessible token already existed and the class was reaching for the fill colour instead of the ink.Rather than swap in a better colour, body copy is now not tinted at all. Each card already spends colour twice — an icon and a coloured verdict — and a third pass over the sentence beneath bought no signal while costing legibility. That is the rule
_styles.scssalready states for the banner, and these cards were breaking it.The disclosures are gone. Both cards hid their evidence behind a
Technical detailtoggle, rendered in the muted de-emphasis ink. On System Info — a page whose entire purpose is showing exactly that — this inverted the emphasis: the prose carried the weight while the numbers someone opened the page for were hidden and greyed.The detail blocks are readouts, not prose. They were paragraphs with monospace fragments embedded at 0.78rem, which read as mixed type and buried the one figure they exist for. Now a two-column list: labels in a fixed column, values sharing one left edge in a single monospace size. Inline
codeno longer sets0.95emeither — a monospace face set fractionally smaller than its surroundings reads as a mistake, and the family already carries the distinction.The banner. It ran four prose sizes (17/15/14/11.2px);
See detailsnow matches the body, leaving the title and the eyebrow as the only deliberate steps. That link was alsoalign-self: center, so it floated at the vertical midpoint of a banner whose height varies with the copy, sitting beside an arbitrary bullet with no relationship to anything. It is now aligned to the title it belongs to.Colour appears once per card, and the muted ink is used for exactly one thing: the closing line that explains a number rather than being one.
Scope note
The
.stat-card__meta--warndefect is shared by the Power supply and low-RAM cards, so fixing the token fixes all three. The low-RAM badge keeps the modifier — it has no coloured verdict above it, so its icon and bold lead-in are the only signal it has.The
.status-verdictcolours themselves are untouched. That treatment predates this work and is used by the Power supply card, so re-picking those tokens is a page-wide palette decision rather than a storage-notice one.Checklist
Contrast was computed in the browser against the live testbeds, before and after, rather than eyeballed. Every element of both notices now passes AA in every state. Verified on the x86 board (storage notice, which has a genuine fault to display) and on the Pi 4 (under-voltage notice — x86 has no
rpi_voltsensor, so it can only ever render "Not monitored").🤖 Generated with Claude Code