1 Commits
Author SHA1 Message Date
TheWitness 38bdabf90f monitor: use CSS Grid for truly equal-width legend chips (#263)
* monitor: use CSS Grid for truly equal-width legend chips

The .monitorLegend flex: 1 1 0 + flex-wrap layout distributes free space per wrapped line, so a partial last row stretched its chips wider than full rows. Switch to a grid (repeat(auto-fill, minmax(var(--monitor-chip-min), 1fr))) so every chip shares an equal column across all rows. The longest-label seed (--monitor-chip-min from includes/controller.php) still drives the column minimum.

* monitor: use auto-fit so chips fill the legend width when they fit on one row

Review follow-up (#263): auto-fill retains empty implicit columns on wide viewports, leaving unused slots so the chips do not fill the legend width. auto-fit collapses the empty tracks while keeping equal shared columns across wrapped rows.

* monitor: extract monitor_legend() and add unit coverage

The status legend was rendered inline in includes/controller.php, so it had no unit coverage like the thold/servcheck/mactrack/syslog legends. Extract it into monitor_legend(array \, array \) in includes/functions.php (in the phpunit coverage source set) and add MonitorLegendTest.php asserting the exact calc(Nch + 1.5rem) longest-label value. No behaviour change.

* monitor: escape status-legend chip labels at output

Defence-in-depth: wrap the legend chip display text in html_escape() so markup or HTML entities in a translated label cannot alter the legend DOM. Applied consistently across the thold/monitor/servcheck/mactrack/syslog fleet legends. The chip-min sizing still measures the unescaped label length, so layout is unchanged.
2026-10-07 13:20:26 -04:00