thold: make legend chips fill their grid cell (fix width leak)

[TheWitness]

Description

Follow-up to #847. The legend chips (Thold, Device status, Log status) were not filling the available width: each chip hugged its text, the row showed large uneven gaps, and multi-word labels (e.g. Baseline Alert) spilled past the coloured background.

Root cause

Every chip <div> carries two classes — the new tholdLegendItem plus a legacy per-state class (.tholdAlert, .tholdBaseAlert, .deviceUpFull, …). Those legacy classes still declare a fixed width: 14% / width: 11.11%, and the new .tholdLegend .tholdLegendItem rule never set a width. So the legacy width leaked onto the grid items and stopped them stretching to fill their 1fr grid track, which also left long labels overflowing the colour box.

Fix

Give .tholdLegend .tholdLegendItem an explicit fill:

box-sizing: border-box;
width: 100%;
min-width: 0;

The higher-specificity rule overrides the leaked legacy width, so each chip fills its grid cell. Combined with the existing --thold-chip-min: calc(<longest>ch + 1.5rem) track floor, every chip is equal width, the label stays centred, and it never exceeds the coloured boundary. Applied identically to all eight theme stylesheets.

Types of changes

• Bug fix (non-breaking change which fixes an issue)

Checklist

• My code follows the code style of this project.

[Copilot]

🟢 Approval recommended

The targeted CSS override consistently resolves the legacy width conflict across all eight themes.

0 open findings

What changed in this PR

Fixes legend chip sizing across all themes by overriding legacy fixed widths.

Changes:

• Makes chips fill their CSS grid cells.
• Includes padding within the assigned width.
• Allows grid items to shrink correctly.

File	Description
css/​classic.css	Applies corrected legend sizing.
css/​dark.css	Applies corrected legend sizing.
css/​deepness.css	Applies corrected legend sizing.
css/​midwinter.css	Applies corrected legend sizing.
css/​modern.css	Applies corrected legend sizing.
css/​paper-plane.css	Applies corrected legend sizing.
css/​paw.css	Applies corrected legend sizing.
css/​sunrise.css	Applies corrected legend sizing.

🧠 Review effort: Balanced

---

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