fix(ui): floating-label overlap, SSL-off badge, and consistent pie colours

[vpetersson-bot]

Issues Fixed

No tracked issue. Two defects spotted while reviewing the design-token
work on the hardware testbeds:

1. In the Edit asset modal, the "Auto-refresh interval (seconds)" and
   "Custom HTTP headers" labels render on top of their placeholder text.
2. Turning off "Verify SSL certificates" disables certificate checks
   device-wide with no at-a-glance signal once the page is saved and
   revisited.
3. On System Info, the disk pie painted "used" red while the memory pie
   next to it painted "used" blue, so slice colour meant different
   things on two charts on the same page.

Description

Floating label vs placeholder. .app-floating > label rests over the
input and only lifts on :focus, :not(:placeholder-shown), or for
selects. :placeholder-shown is true exactly while a placeholder is on
screen, so a field carrying a real placeholder draws its label on top of
that placeholder. The pattern and a visible placeholder were mutually
exclusive.

The two affected fields are the only .app-floating fields in the entire
template set with a non-empty placeholder. Both placeholders are useful
worked examples (notably the Authorization: Bearer <token> format), so
instead of deleting them this adds an .app-floating--lifted modifier
that keeps the label raised from the start. The existing
padding-block: 1.4rem 0.4rem already reserves the space, so nothing
else shifts.

SSL warning badge. _settings_toggle.html gains an optional
warn_when_off argument, so any toggle whose OFF state is the risky one
can badge itself rather than special-casing SSL. verify_ssl is the only
caller today and passes "Not secure". It reuses the existing
.settings-section__badge styling already used for "Experimental" on the
Display power section, and tracks the live checkbox via Alpine so the
warning appears the instant the switch is flipped rather than after a
save round-trip.

Disk pie colours. The disk chart overrode slice 1 to --color-danger
so a near-full drive would read as a warning. The cost was that "used"
was red on one chart and blue on the chart beside it. Both overrides
(pie and legend) are dropped so disk inherits the shared scheme: used =
--color-link, free = --color-success, identical to memory. Only
slice 1 actually changes, since slice 3 already resolved to
--color-success in both. The at-a-glance warning is not lost: the
storage-health panel directly below raises a real alert with advice when
the drive needs attention. The .resource-pie--disk class stays on the
element as it is a selector in tests/test_app.py.

Checklist

• I have performed a self-review of my own code.
• New and existing unit tests pass locally and on CI with my changes.
  Ran the suites covering these surfaces: test_design_tokens.py,
  test_design_system_page.py, test_template_views.py,
  test_settings.py, test_app.py. 226 passed. The full suite was
  not run locally.
• I have done an end-to-end test for Raspberry Pi devices.
  Pi 4 testbed, on the current master build. Template and compiled
  CSS overlaid into the running anthias-server container via
  docker cp, container restarted, then verified: the new rule is
  present in the CSS served over HTTP, both modal fields render with
  the modifier on the live page, and the badge renders on the
  settings page with verify_ssl off. For the pie change, confirmed
  the override is gone from the served CSS and captured System Info
  showing both pies sharing purple for used and green for free.
• I have tested my changes for x86 devices.
  Not tested on x86. This is CSS and template only with no
  board-specific behaviour, but flagging it rather than assuming.
• I added a documentation for the changes I have made (when necessary).
  Not applicable.

[Copilot]

Pull request overview

This PR addresses two UI defects in the Anthias Django-rendered web UI: (1) floating labels overlapping placeholder text in the Edit Asset modal, and (2) lack of a persistent at-a-glance warning when SSL certificate verification is disabled.

Changes:

• Add an .app-floating--lifted modifier to keep floating labels raised for fields that intentionally show placeholders as worked examples.
• Extend the settings toggle partial to optionally render a live “warn when off” badge driven by Alpine.js, and apply it to verify_ssl.
• Update styles to support the lifted floating-label modifier.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated no comments.

File	Description
src/anthias_server/app/templates/settings.html	Adds warn_when_off="Not secure" for the verify_ssl toggle.
src/anthias_server/app/templates/_settings_toggle.html	Adds optional Alpine-driven warning badge behavior for risky-OFF toggles.
src/anthias_server/app/templates/_asset_modal.html	Applies app-floating--lifted to the two placeholder-bearing floating-label fields.
src/anthias_server/app/static/sass/_styles.scss	Implements the .app-floating--lifted modifier to keep labels raised.

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[Copilot]

Pull request overview

Copilot reviewed 4 out of 4 changed files in this pull request and generated no new comments.

Suppressed comments (1)

src/anthias_server/app/static/sass/_styles.scss:1854

• This PR also changes the Disk resource pie colour semantics by removing the disk-specific slice/legend overrides (so it now follows the default slice colours). This is a user-visible behaviour change on the System Info page (resource-pie--disk) but it isn’t mentioned in the PR description/title, which currently frames the PR as only addressing floating labels + SSL warning badge. Consider either documenting this additional UI change in the PR description (including rationale) or splitting it into a separate PR to keep scope focused.

// Disk deliberately carries no slice-colour overrides: it shares the
// memory pie's scheme so "used" means the same colour on both charts.
// It previously painted slice 1 with --color-danger so a near-full drive
// read as a warning, but that made the same quantity red here and blue
// there, and the storage-health panel directly below already raises an
// actual alert when the drive needs attention.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
⚠️ Please upload report for BASE (master@ce2abc7). Learn more about missing BASE report.

Additional details and impacted files

@@            Coverage Diff            @@
##             master    #3289   +/-   ##
=========================================
  Coverage          ?   90.33%           
=========================================
  Files             ?       85           
  Lines             ?     9942           
  Branches          ?     1098           
=========================================
  Hits              ?     8981           
  Misses            ?      708           
  Partials          ?      253           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.