servcheck: keep legend chips equal width using the longest label

CHANGELOG.md

@@ -1,7 +1,8 @@
-# ChangeLog
+# ChangeLog
 
 --- develop ---
 
+* dev: Keep the status-legend chips equal width (sized to the longest label, laid out as a CSS grid so chips stay equal across wrapped rows) as the legend wraps responsively
 * dev: Measure CI coverage with xdebug instead of pcov so the plugin's own sources are instrumented (pcov auto-scopes to the Composer root and skipped cacti/plugins/, leaving the patch-coverage gate with nothing to measure)
 * dev: Enforce patch coverage of changed lines in CI and remove the inert COMPOSER_ROOT_VERSION env from the Pest step
 * feature: Add a configurable User-Agent setting for HTTP/HTTPS and other cURL based service checks, so outdated-browser blocking no longer rejects the plugin's requests

css/common.css

@@ -65,21 +65,21 @@
 }
 
 /*
- * Status legend footer. The items are laid out as an evenly sized, wrapping
- * flex row (flex: 1 1 0 gives every chip the same width). A legend is a colour
- * key, so the chips use their own solid, opaque colours with white text so they
- * stay legible on every theme rather than inheriting the subtle row tints.
+ * Status legend footer. The items are laid out as a wrapping CSS grid whose
+ * columns share one width (seeded from the longest label via
+ * --servcheck-chip-min) so every chip is equal width across all rows. A legend
+ * is a colour key, so the chips use their own solid, opaque colours with white
+ * text so they stay legible on every theme rather than inheriting the subtle
+ * row tints.
  */
 .servcheck_legend {
-	display: flex;
-	flex-wrap: wrap;
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(var(--servcheck-chip-min, 8ch), 1fr));
 	gap: 4px;
 	width: 100%;
 }
 
 .servcheck_legend .servcheck_legend_item {
-	flex: 1 1 0;
-	min-width: 0;
 	text-align: center;
 	white-space: nowrap;
 	padding: 4px 6px;

includes/functions.php

@@ -342,11 +342,17 @@ function servcheck_legend(): void {
 
 	html_start_box('', '100%', false, 3, 'center', '');
 
+	$chip_min = 0;
+
+	foreach ($servcheck_states as $state) {
+		$chip_min = max($chip_min, mb_strlen($state));
+	}
+
 	print '<tr class="tableRow"><td>';
-	print '<div class="servcheck_legend">';
+	print '<div class="servcheck_legend" style="--servcheck-chip-min: calc(' . $chip_min . 'ch + 1.5rem)">';
 
 	foreach ($servcheck_states as $index => $state) {
-		print '<div class="servcheck_legend_item servcheck_' . $index . '">' . $state . '</div>';
+		print '<div class="servcheck_legend_item servcheck_' . $index . '">' . html_escape($state) . '</div>';
 	}
 
 	print '</div>';

phpunit.xml

@@ -28,6 +28,7 @@
     <source>
         <include>
             <file>setup.php</file>
+            <file>includes/functions.php</file>
         </include>
     </source>
 </phpunit>

tests/Unit/ServcheckLegendTest.php

@@ -0,0 +1,60 @@
+<?php
+/*
+ +-------------------------------------------------------------------------+
+ | Copyright (C) 2004-2026 The Cacti Group                                 |
+ |                                                                         |
+ | This program is free software; you can redistribute it and/or           |
+ | modify it under the terms of the GNU General Public License             |
+ | as published by the Free Software Foundation; either version 2          |
+ | of the License, or (at your option) any later version.                  |
+ |                                                                         |
+ | This program is distributed in the hope that it will be useful,         |
+ | but WITHOUT ANY WARRANTY; without even the implied warranty of          |
+ | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the           |
+ | GNU General Public License for more details.                            |
+ +-------------------------------------------------------------------------+
+ | Cacti: The Complete RRDtool-based Graphing Solution                     |
+ +-------------------------------------------------------------------------+
+ | This code is designed, written, and maintained by the Cacti Group. See  |
+ | about.php and/or the AUTHORS file for specific developer information.    |
+ +-------------------------------------------------------------------------+
+ | http://www.cacti.net/                                                   |
+ +-------------------------------------------------------------------------+
+*/
+
+/*
+ * Rendering of the status legend, servcheck_legend().
+ *
+ * The renderer walks $servcheck_states (from includes/arrays.php) and prints
+ * one .servcheck_legend_item chip per state. html_start_box()/html_end_box()
+ * are no-op stubs from the bootstrap, so only the chip markup reaches the
+ * output buffer. The container carries a --servcheck-chip-min variable, sized
+ * to the longest label, so every chip shares one min-width and stays equal
+ * width as the legend wraps.
+ */
+
+beforeAll(function () {
+	// Publishes $servcheck_states and defines servcheck_legend().
+	servcheck_test_load(__DIR__ . '/../../includes/arrays.php');
+	servcheck_test_load(__DIR__ . '/../../includes/functions.php');
+});
+
+it('renders one chip per state with a longest-label chip-min variable', function () {
+	ob_start();
+	servcheck_legend();
+	$output = ob_get_clean();
+
+	$states = $GLOBALS['servcheck_states'];
+
+	$expected = 0;
+	foreach ($states as $state) {
+		$expected = max($expected, mb_strlen($state));
+	}
+
+	expect($output)->toContain('<div class="servcheck_legend" style="--servcheck-chip-min: calc(' . $expected . 'ch + 1.5rem)">');
+	expect(substr_count($output, 'servcheck_legend_item'))->toBe(count($states));
+
+	foreach ($states as $index => $state) {
+		expect($output)->toContain('<div class="servcheck_legend_item servcheck_' . $index . '">' . $state . '</div>');
+	}
+});

tests/bootstrap-unit.php

@@ -361,6 +361,16 @@ function form_input_validate($value, $name, $regex, $optional, $error) {
 	}
 }
 
+if (!function_exists('html_start_box')) {
+	function html_start_box($title = '', $width = '100%', $div = '', $cell_padding = 3, $align = 'center', $add_text = '') {
+	}
+}
+
+if (!function_exists('html_end_box')) {
+	function html_end_box($trailing_br = true, $resizable = false) {
+	}
+}
+
 if (!function_exists('is_error_message')) {
 	function is_error_message() {
 		return false;