From 5fe27fc72f6a4e0903542a9d5a3bd8a9b99d31e6 Mon Sep 17 00:00:00 2001
From: TheWitness <thewitness@cacti.net>
Date: Wed, 7 Oct 2026 09:09:20 -0400
Subject: [PATCH 1/4] thold: keep legend chips equal width using the longest
 label

The Thold/Host/Log status legends used flex:1 1 0 with no shared minimum, so chips grew to unequal widths (and could clip their labels when tight). CSS can't measure the widest sibling, so the three legend renderers now compute the longest label and emit it as a --thold-chip-min CSS variable (calc(<longest>ch + 1.5rem)); every theme's .tholdLegendItem uses it as a shared min-width (falling back to max-content). All chips share one minimum, so they stay equal width as the legend wraps. Updated TholdLegendTest assertions to match the new container markup.
---
 CHANGELOG.md                   |  1 +
 css/classic.css                |  1 +
 css/dark.css                   |  1 +
 css/deepness.css               |  1 +
 css/midwinter.css              |  1 +
 css/modern.css                 |  1 +
 css/paper-plane.css            |  1 +
 css/paw.css                    |  1 +
 css/sunrise.css                |  1 +
 includes/functions.php         | 24 +++++++++++++++++++++---
 tests/Unit/TholdLegendTest.php |  6 +++---
 11 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c10e5a86..bf316b9c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,7 @@
 --- develop ---
 * dev: Remove the inert COMPOSER_ROOT_VERSION env from the Pest CI step
 * feature: Restyle the Thold, Host status and Log status legends as rounded, evenly-spaced solid-colour chips for a clearer, more readable status key across every theme
+* dev: Keep the status-legend chips equal width (sized to the longest label) as the legend wraps responsively
 * security: Add a version-safe CSP nonce (`plugin_thold_csp_nonce()`) to every inline `<script>` tag so pages stay compatible with Cacti's Content-Security-Policy nonce enforcement, while falling back cleanly on older Cacti releases that lack the `CactiSecureHeaders` class
 * issue: Center-align the "Not Monitored" status cell on the Device Status page (thold_graph.php) so it matches the other status values instead of rendering right-aligned
 * issue: Define `plugin_thold_csp_nonce()` in thold_functions.php instead of setup.php so it is always available on plugin pages, fixing a fatal "Call to undefined function plugin_thold_csp_nonce()" that disabled the plugin when a page loaded without setup.php
diff --git a/css/classic.css b/css/classic.css
index 326b3406..17bd8f14 100644
--- a/css/classic.css
+++ b/css/classic.css
@@ -298,6 +298,7 @@
 
 .tholdLegend .tholdLegendItem {
 	flex: 1 1 0;
+	min-width: var(--thold-chip-min, max-content);
 	text-align: center;
 	white-space: nowrap;
 	padding: 4px 6px;
diff --git a/css/dark.css b/css/dark.css
index 76ea1203..955aa092 100644
--- a/css/dark.css
+++ b/css/dark.css
@@ -320,6 +320,7 @@
 
 .tholdLegend .tholdLegendItem {
 	flex: 1 1 0;
+	min-width: var(--thold-chip-min, max-content);
 	text-align: center;
 	white-space: nowrap;
 	padding: 4px 6px;
diff --git a/css/deepness.css b/css/deepness.css
index 5ffa1b80..987680e2 100644
--- a/css/deepness.css
+++ b/css/deepness.css
@@ -320,6 +320,7 @@
 
 .tholdLegend .tholdLegendItem {
 	flex: 1 1 0;
+	min-width: var(--thold-chip-min, max-content);
 	text-align: center;
 	white-space: nowrap;
 	padding: 4px 6px;
diff --git a/css/midwinter.css b/css/midwinter.css
index f2c62542..5ebb500a 100644
--- a/css/midwinter.css
+++ b/css/midwinter.css
@@ -320,6 +320,7 @@
 
 .tholdLegend .tholdLegendItem {
 	flex: 1 1 0;
+	min-width: var(--thold-chip-min, max-content);
 	text-align: center;
 	white-space: nowrap;
 	padding: 4px 6px;
diff --git a/css/modern.css b/css/modern.css
index 35495c6f..951aa519 100644
--- a/css/modern.css
+++ b/css/modern.css
@@ -314,6 +314,7 @@
 
 .tholdLegend .tholdLegendItem {
 	flex: 1 1 0;
+	min-width: var(--thold-chip-min, max-content);
 	text-align: center;
 	white-space: nowrap;
 	padding: 4px 6px;
diff --git a/css/paper-plane.css b/css/paper-plane.css
index 7c34cf2d..b7aaedb3 100644
--- a/css/paper-plane.css
+++ b/css/paper-plane.css
@@ -294,6 +294,7 @@
 
 .tholdLegend .tholdLegendItem {
 	flex: 1 1 0;
+	min-width: var(--thold-chip-min, max-content);
 	text-align: center;
 	white-space: nowrap;
 	padding: 4px 6px;
diff --git a/css/paw.css b/css/paw.css
index f80a6fab..af7fac75 100644
--- a/css/paw.css
+++ b/css/paw.css
@@ -320,6 +320,7 @@
 
 .tholdLegend .tholdLegendItem {
 	flex: 1 1 0;
+	min-width: var(--thold-chip-min, max-content);
 	text-align: center;
 	white-space: nowrap;
 	padding: 4px 6px;
diff --git a/css/sunrise.css b/css/sunrise.css
index 9b1d4e1c..9a738523 100644
--- a/css/sunrise.css
+++ b/css/sunrise.css
@@ -320,6 +320,7 @@
 
 .tholdLegend .tholdLegendItem {
 	flex: 1 1 0;
+	min-width: var(--thold-chip-min, max-content);
 	text-align: center;
 	white-space: nowrap;
 	padding: 4px 6px;
diff --git a/includes/functions.php b/includes/functions.php
index a616a234..9b53abae 100644
--- a/includes/functions.php
+++ b/includes/functions.php
@@ -371,8 +371,14 @@ function thold_legend() {
 
 	html_start_box('', '100%', false, '3', 'center', '');
 
+	$chip_min = 0;
+
+	foreach ($thold_states as $state) {
+		$chip_min = max($chip_min, mb_strlen($state['display']));
+	}
+
 	print '<tr class="tableRow"><td>';
-	print '<div class="tholdLegend">';
+	print '<div class="tholdLegend" style="--thold-chip-min: calc(' . $chip_min . 'ch + 1.5rem)">';
 
 	foreach ($thold_states as $index => $state) {
 		print '<div class="tholdLegendItem ' . $state['class'] . '">' . $state['display'] . '</div>';
@@ -397,8 +403,14 @@ function host_legend() {
 
 	html_start_box('', '100%', false, '3', 'center', '');
 
+	$chip_min = 0;
+
+	foreach ($thold_host_states as $state) {
+		$chip_min = max($chip_min, mb_strlen($state['display']));
+	}
+
 	print '<tr class="tableRow"><td>';
-	print '<div class="tholdLegend">';
+	print '<div class="tholdLegend" style="--thold-chip-min: calc(' . $chip_min . 'ch + 1.5rem)">';
 
 	foreach ($thold_host_states as $index => $state) {
 		print '<div class="tholdLegendItem ' . $state['class'] . '">' . $state['display'] . '</div>';
@@ -423,8 +435,14 @@ function log_legend() {
 
 	html_start_box('', '100%', false, '3', 'center', '');
 
+	$chip_min = 0;
+
+	foreach ($thold_log_states as $state) {
+		$chip_min = max($chip_min, mb_strlen($state['display_short']));
+	}
+
 	print '<tr class="tableRow"><td>';
-	print '<div class="tholdLegend">';
+	print '<div class="tholdLegend" style="--thold-chip-min: calc(' . $chip_min . 'ch + 1.5rem)">';
 
 	foreach ($thold_log_states as $index => $state) {
 		print '<div class="tholdLegendItem ' . $state['class'] . '">' . $state['display_short'] . '</div>';
diff --git a/tests/Unit/TholdLegendTest.php b/tests/Unit/TholdLegendTest.php
index cd6c4acd..8114b3a8 100644
--- a/tests/Unit/TholdLegendTest.php
+++ b/tests/Unit/TholdLegendTest.php
@@ -45,7 +45,7 @@ public function test_thold_legend_renders_one_chip_per_threshold_state(): void {
 
 		$states = $GLOBALS['thold_states'];
 
-		$this->assertStringContainsString('<div class="tholdLegend">', $output);
+		$this->assertStringContainsString('<div class="tholdLegend" style="--thold-chip-min:', $output);
 		$this->assertSame(count($states), substr_count($output, 'tholdLegendItem'));
 
 		foreach ($states as $state) {
@@ -63,7 +63,7 @@ public function test_host_legend_renders_one_chip_per_device_state(): void {
 
 		$states = $GLOBALS['thold_host_states'];
 
-		$this->assertStringContainsString('<div class="tholdLegend">', $output);
+		$this->assertStringContainsString('<div class="tholdLegend" style="--thold-chip-min:', $output);
 		$this->assertSame(count($states), substr_count($output, 'tholdLegendItem'));
 
 		foreach ($states as $state) {
@@ -81,7 +81,7 @@ public function test_log_legend_renders_one_chip_per_log_state_using_short_label
 
 		$states = $GLOBALS['thold_log_states'];
 
-		$this->assertStringContainsString('<div class="tholdLegend">', $output);
+		$this->assertStringContainsString('<div class="tholdLegend" style="--thold-chip-min:', $output);
 		$this->assertSame(count($states), substr_count($output, 'tholdLegendItem'));
 
 		foreach ($states as $state) {

From edb0e038b59e4fe20f82bae1f80c43d730eb8f10 Mon Sep 17 00:00:00 2001
From: TheWitness <thewitness@cacti.net>
Date: Wed, 7 Oct 2026 10:04:02 -0400
Subject: [PATCH 2/4] thold: use CSS Grid for truly equal-width legend chips;
 assert exact chip min

Review follow-up (#847). The 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 - chips were not equal across rows. Switch .tholdLegend to a grid (repeat(auto-fill, minmax(var(--thold-chip-min), 1fr))) so every chip shares an equal column across all rows. The longest-label seed still drives the column minimum. Tests now assert the exact computed calc(Nch + 1.5rem) value instead of mere presence.
---
 css/classic.css                | 12 +++++-------
 css/dark.css                   | 12 +++++-------
 css/deepness.css               | 12 +++++-------
 css/midwinter.css              | 12 +++++-------
 css/modern.css                 | 12 +++++-------
 css/paper-plane.css            | 12 +++++-------
 css/paw.css                    | 12 +++++-------
 css/sunrise.css                | 12 +++++-------
 tests/Unit/TholdLegendTest.php | 21 ++++++++++++++++++---
 9 files changed, 58 insertions(+), 59 deletions(-)

diff --git a/css/classic.css b/css/classic.css
index 17bd8f14..93e3d71f 100644
--- a/css/classic.css
+++ b/css/classic.css
@@ -283,22 +283,20 @@
 }
 
 /*
- * Status legend. Laid out as an evenly sized, wrapping flex row (flex: 1 1 0
- * gives every chip the same width) with rounded corners and spacing between
- * chips. A legend is a colour key, so the chips use their own solid, opaque
+ * Status legend. Laid out as a wrapping CSS grid whose columns share one
+ * width (seeded from the longest label via --thold-chip-min) so every chip is
+ * equal width across all rows, with rounded corners and spacing between chips. 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.
  */
 .tholdLegend {
-	display: flex;
-	flex-wrap: wrap;
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(var(--thold-chip-min, 8ch), 1fr));
 	gap: 4px;
 	width: 100%;
 }
 
 .tholdLegend .tholdLegendItem {
-	flex: 1 1 0;
-	min-width: var(--thold-chip-min, max-content);
 	text-align: center;
 	white-space: nowrap;
 	padding: 4px 6px;
diff --git a/css/dark.css b/css/dark.css
index 955aa092..84fd64d9 100644
--- a/css/dark.css
+++ b/css/dark.css
@@ -305,22 +305,20 @@
 }
 
 /*
- * Status legend. Laid out as an evenly sized, wrapping flex row (flex: 1 1 0
- * gives every chip the same width) with rounded corners and spacing between
- * chips. A legend is a colour key, so the chips use their own solid, opaque
+ * Status legend. Laid out as a wrapping CSS grid whose columns share one
+ * width (seeded from the longest label via --thold-chip-min) so every chip is
+ * equal width across all rows, with rounded corners and spacing between chips. 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.
  */
 .tholdLegend {
-	display: flex;
-	flex-wrap: wrap;
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(var(--thold-chip-min, 8ch), 1fr));
 	gap: 4px;
 	width: 100%;
 }
 
 .tholdLegend .tholdLegendItem {
-	flex: 1 1 0;
-	min-width: var(--thold-chip-min, max-content);
 	text-align: center;
 	white-space: nowrap;
 	padding: 4px 6px;
diff --git a/css/deepness.css b/css/deepness.css
index 987680e2..5ec26e73 100644
--- a/css/deepness.css
+++ b/css/deepness.css
@@ -305,22 +305,20 @@
 }
 
 /*
- * Status legend. Laid out as an evenly sized, wrapping flex row (flex: 1 1 0
- * gives every chip the same width) with rounded corners and spacing between
- * chips. A legend is a colour key, so the chips use their own solid, opaque
+ * Status legend. Laid out as a wrapping CSS grid whose columns share one
+ * width (seeded from the longest label via --thold-chip-min) so every chip is
+ * equal width across all rows, with rounded corners and spacing between chips. 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.
  */
 .tholdLegend {
-	display: flex;
-	flex-wrap: wrap;
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(var(--thold-chip-min, 8ch), 1fr));
 	gap: 4px;
 	width: 100%;
 }
 
 .tholdLegend .tholdLegendItem {
-	flex: 1 1 0;
-	min-width: var(--thold-chip-min, max-content);
 	text-align: center;
 	white-space: nowrap;
 	padding: 4px 6px;
diff --git a/css/midwinter.css b/css/midwinter.css
index 5ebb500a..4134d7ba 100644
--- a/css/midwinter.css
+++ b/css/midwinter.css
@@ -305,22 +305,20 @@
 }
 
 /*
- * Status legend. Laid out as an evenly sized, wrapping flex row (flex: 1 1 0
- * gives every chip the same width) with rounded corners and spacing between
- * chips. A legend is a colour key, so the chips use their own solid, opaque
+ * Status legend. Laid out as a wrapping CSS grid whose columns share one
+ * width (seeded from the longest label via --thold-chip-min) so every chip is
+ * equal width across all rows, with rounded corners and spacing between chips. 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.
  */
 .tholdLegend {
-	display: flex;
-	flex-wrap: wrap;
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(var(--thold-chip-min, 8ch), 1fr));
 	gap: 4px;
 	width: 100%;
 }
 
 .tholdLegend .tholdLegendItem {
-	flex: 1 1 0;
-	min-width: var(--thold-chip-min, max-content);
 	text-align: center;
 	white-space: nowrap;
 	padding: 4px 6px;
diff --git a/css/modern.css b/css/modern.css
index 951aa519..ff716912 100644
--- a/css/modern.css
+++ b/css/modern.css
@@ -299,22 +299,20 @@
 }
 
 /*
- * Status legend. Laid out as an evenly sized, wrapping flex row (flex: 1 1 0
- * gives every chip the same width) with rounded corners and spacing between
- * chips. A legend is a colour key, so the chips use their own solid, opaque
+ * Status legend. Laid out as a wrapping CSS grid whose columns share one
+ * width (seeded from the longest label via --thold-chip-min) so every chip is
+ * equal width across all rows, with rounded corners and spacing between chips. 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.
  */
 .tholdLegend {
-	display: flex;
-	flex-wrap: wrap;
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(var(--thold-chip-min, 8ch), 1fr));
 	gap: 4px;
 	width: 100%;
 }
 
 .tholdLegend .tholdLegendItem {
-	flex: 1 1 0;
-	min-width: var(--thold-chip-min, max-content);
 	text-align: center;
 	white-space: nowrap;
 	padding: 4px 6px;
diff --git a/css/paper-plane.css b/css/paper-plane.css
index b7aaedb3..b2be6d4a 100644
--- a/css/paper-plane.css
+++ b/css/paper-plane.css
@@ -279,22 +279,20 @@
 }
 
 /*
- * Status legend. Laid out as an evenly sized, wrapping flex row (flex: 1 1 0
- * gives every chip the same width) with rounded corners and spacing between
- * chips. A legend is a colour key, so the chips use their own solid, opaque
+ * Status legend. Laid out as a wrapping CSS grid whose columns share one
+ * width (seeded from the longest label via --thold-chip-min) so every chip is
+ * equal width across all rows, with rounded corners and spacing between chips. 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.
  */
 .tholdLegend {
-	display: flex;
-	flex-wrap: wrap;
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(var(--thold-chip-min, 8ch), 1fr));
 	gap: 4px;
 	width: 100%;
 }
 
 .tholdLegend .tholdLegendItem {
-	flex: 1 1 0;
-	min-width: var(--thold-chip-min, max-content);
 	text-align: center;
 	white-space: nowrap;
 	padding: 4px 6px;
diff --git a/css/paw.css b/css/paw.css
index af7fac75..9c44eaef 100644
--- a/css/paw.css
+++ b/css/paw.css
@@ -305,22 +305,20 @@
 }
 
 /*
- * Status legend. Laid out as an evenly sized, wrapping flex row (flex: 1 1 0
- * gives every chip the same width) with rounded corners and spacing between
- * chips. A legend is a colour key, so the chips use their own solid, opaque
+ * Status legend. Laid out as a wrapping CSS grid whose columns share one
+ * width (seeded from the longest label via --thold-chip-min) so every chip is
+ * equal width across all rows, with rounded corners and spacing between chips. 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.
  */
 .tholdLegend {
-	display: flex;
-	flex-wrap: wrap;
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(var(--thold-chip-min, 8ch), 1fr));
 	gap: 4px;
 	width: 100%;
 }
 
 .tholdLegend .tholdLegendItem {
-	flex: 1 1 0;
-	min-width: var(--thold-chip-min, max-content);
 	text-align: center;
 	white-space: nowrap;
 	padding: 4px 6px;
diff --git a/css/sunrise.css b/css/sunrise.css
index 9a738523..3bfe2fa2 100644
--- a/css/sunrise.css
+++ b/css/sunrise.css
@@ -305,22 +305,20 @@
 }
 
 /*
- * Status legend. Laid out as an evenly sized, wrapping flex row (flex: 1 1 0
- * gives every chip the same width) with rounded corners and spacing between
- * chips. A legend is a colour key, so the chips use their own solid, opaque
+ * Status legend. Laid out as a wrapping CSS grid whose columns share one
+ * width (seeded from the longest label via --thold-chip-min) so every chip is
+ * equal width across all rows, with rounded corners and spacing between chips. 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.
  */
 .tholdLegend {
-	display: flex;
-	flex-wrap: wrap;
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(var(--thold-chip-min, 8ch), 1fr));
 	gap: 4px;
 	width: 100%;
 }
 
 .tholdLegend .tholdLegendItem {
-	flex: 1 1 0;
-	min-width: var(--thold-chip-min, max-content);
 	text-align: center;
 	white-space: nowrap;
 	padding: 4px 6px;
diff --git a/tests/Unit/TholdLegendTest.php b/tests/Unit/TholdLegendTest.php
index 8114b3a8..83174aba 100644
--- a/tests/Unit/TholdLegendTest.php
+++ b/tests/Unit/TholdLegendTest.php
@@ -45,7 +45,12 @@ public function test_thold_legend_renders_one_chip_per_threshold_state(): void {
 
 		$states = $GLOBALS['thold_states'];
 
-		$this->assertStringContainsString('<div class="tholdLegend" style="--thold-chip-min:', $output);
+		$expected = 0;
+		foreach ($states as $state) {
+			$expected = max($expected, mb_strlen($state['display']));
+		}
+
+		$this->assertStringContainsString('<div class="tholdLegend" style="--thold-chip-min: calc(' . $expected . 'ch + 1.5rem)">', $output);
 		$this->assertSame(count($states), substr_count($output, 'tholdLegendItem'));
 
 		foreach ($states as $state) {
@@ -63,7 +68,12 @@ public function test_host_legend_renders_one_chip_per_device_state(): void {
 
 		$states = $GLOBALS['thold_host_states'];
 
-		$this->assertStringContainsString('<div class="tholdLegend" style="--thold-chip-min:', $output);
+		$expected = 0;
+		foreach ($states as $state) {
+			$expected = max($expected, mb_strlen($state['display']));
+		}
+
+		$this->assertStringContainsString('<div class="tholdLegend" style="--thold-chip-min: calc(' . $expected . 'ch + 1.5rem)">', $output);
 		$this->assertSame(count($states), substr_count($output, 'tholdLegendItem'));
 
 		foreach ($states as $state) {
@@ -81,7 +91,12 @@ public function test_log_legend_renders_one_chip_per_log_state_using_short_label
 
 		$states = $GLOBALS['thold_log_states'];
 
-		$this->assertStringContainsString('<div class="tholdLegend" style="--thold-chip-min:', $output);
+		$expected = 0;
+		foreach ($states as $state) {
+			$expected = max($expected, mb_strlen($state['display_short']));
+		}
+
+		$this->assertStringContainsString('<div class="tholdLegend" style="--thold-chip-min: calc(' . $expected . 'ch + 1.5rem)">', $output);
 		$this->assertSame(count($states), substr_count($output, 'tholdLegendItem'));
 
 		foreach ($states as $state) {

From 644da6fdf056d1284b010128f0e36d44a480aed6 Mon Sep 17 00:00:00 2001
From: TheWitness <thewitness@cacti.net>
Date: Wed, 7 Oct 2026 10:27:17 -0400
Subject: [PATCH 3/4] thold: use auto-fit so chips fill the legend width when
 they fit on one row

Review follow-up: auto-fill keeps empty implicit tracks, so on a wide viewport where all chips fit in one row they no longer stretch to fill the legend (as they did under flex). auto-fit collapses the empty tracks while still sharing equal columns when the legend wraps to multiple rows.
---
 css/classic.css     | 2 +-
 css/dark.css        | 2 +-
 css/deepness.css    | 2 +-
 css/midwinter.css   | 2 +-
 css/modern.css      | 2 +-
 css/paper-plane.css | 2 +-
 css/paw.css         | 2 +-
 css/sunrise.css     | 2 +-
 8 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/css/classic.css b/css/classic.css
index 93e3d71f..8332b401 100644
--- a/css/classic.css
+++ b/css/classic.css
@@ -291,7 +291,7 @@
  */
 .tholdLegend {
 	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(var(--thold-chip-min, 8ch), 1fr));
+	grid-template-columns: repeat(auto-fit, minmax(var(--thold-chip-min, 8ch), 1fr));
 	gap: 4px;
 	width: 100%;
 }
diff --git a/css/dark.css b/css/dark.css
index 84fd64d9..f44acba5 100644
--- a/css/dark.css
+++ b/css/dark.css
@@ -313,7 +313,7 @@
  */
 .tholdLegend {
 	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(var(--thold-chip-min, 8ch), 1fr));
+	grid-template-columns: repeat(auto-fit, minmax(var(--thold-chip-min, 8ch), 1fr));
 	gap: 4px;
 	width: 100%;
 }
diff --git a/css/deepness.css b/css/deepness.css
index 5ec26e73..3bd29a57 100644
--- a/css/deepness.css
+++ b/css/deepness.css
@@ -313,7 +313,7 @@
  */
 .tholdLegend {
 	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(var(--thold-chip-min, 8ch), 1fr));
+	grid-template-columns: repeat(auto-fit, minmax(var(--thold-chip-min, 8ch), 1fr));
 	gap: 4px;
 	width: 100%;
 }
diff --git a/css/midwinter.css b/css/midwinter.css
index 4134d7ba..d7544198 100644
--- a/css/midwinter.css
+++ b/css/midwinter.css
@@ -313,7 +313,7 @@
  */
 .tholdLegend {
 	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(var(--thold-chip-min, 8ch), 1fr));
+	grid-template-columns: repeat(auto-fit, minmax(var(--thold-chip-min, 8ch), 1fr));
 	gap: 4px;
 	width: 100%;
 }
diff --git a/css/modern.css b/css/modern.css
index ff716912..75945de1 100644
--- a/css/modern.css
+++ b/css/modern.css
@@ -307,7 +307,7 @@
  */
 .tholdLegend {
 	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(var(--thold-chip-min, 8ch), 1fr));
+	grid-template-columns: repeat(auto-fit, minmax(var(--thold-chip-min, 8ch), 1fr));
 	gap: 4px;
 	width: 100%;
 }
diff --git a/css/paper-plane.css b/css/paper-plane.css
index b2be6d4a..c092123d 100644
--- a/css/paper-plane.css
+++ b/css/paper-plane.css
@@ -287,7 +287,7 @@
  */
 .tholdLegend {
 	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(var(--thold-chip-min, 8ch), 1fr));
+	grid-template-columns: repeat(auto-fit, minmax(var(--thold-chip-min, 8ch), 1fr));
 	gap: 4px;
 	width: 100%;
 }
diff --git a/css/paw.css b/css/paw.css
index 9c44eaef..c71d7075 100644
--- a/css/paw.css
+++ b/css/paw.css
@@ -313,7 +313,7 @@
  */
 .tholdLegend {
 	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(var(--thold-chip-min, 8ch), 1fr));
+	grid-template-columns: repeat(auto-fit, minmax(var(--thold-chip-min, 8ch), 1fr));
 	gap: 4px;
 	width: 100%;
 }
diff --git a/css/sunrise.css b/css/sunrise.css
index 3bfe2fa2..bd6c9f39 100644
--- a/css/sunrise.css
+++ b/css/sunrise.css
@@ -313,7 +313,7 @@
  */
 .tholdLegend {
 	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(var(--thold-chip-min, 8ch), 1fr));
+	grid-template-columns: repeat(auto-fit, minmax(var(--thold-chip-min, 8ch), 1fr));
 	gap: 4px;
 	width: 100%;
 }

From f38ba08de9ee480790669bbec7f2f11e2c55fea9 Mon Sep 17 00:00:00 2001
From: TheWitness <thewitness@cacti.net>
Date: Wed, 7 Oct 2026 12:27:03 -0400
Subject: [PATCH 4/4] thold: 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.
---
 includes/functions.php | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/includes/functions.php b/includes/functions.php
index 9b53abae..5565c59f 100644
--- a/includes/functions.php
+++ b/includes/functions.php
@@ -381,7 +381,7 @@ function thold_legend() {
 	print '<div class="tholdLegend" style="--thold-chip-min: calc(' . $chip_min . 'ch + 1.5rem)">';
 
 	foreach ($thold_states as $index => $state) {
-		print '<div class="tholdLegendItem ' . $state['class'] . '">' . $state['display'] . '</div>';
+		print '<div class="tholdLegendItem ' . $state['class'] . '">' . html_escape($state['display']) . '</div>';
 	}
 
 	print '</div>';
@@ -413,7 +413,7 @@ function host_legend() {
 	print '<div class="tholdLegend" style="--thold-chip-min: calc(' . $chip_min . 'ch + 1.5rem)">';
 
 	foreach ($thold_host_states as $index => $state) {
-		print '<div class="tholdLegendItem ' . $state['class'] . '">' . $state['display'] . '</div>';
+		print '<div class="tholdLegendItem ' . $state['class'] . '">' . html_escape($state['display']) . '</div>';
 	}
 
 	print '</div>';
@@ -445,7 +445,7 @@ function log_legend() {
 	print '<div class="tholdLegend" style="--thold-chip-min: calc(' . $chip_min . 'ch + 1.5rem)">';
 
 	foreach ($thold_log_states as $index => $state) {
-		print '<div class="tholdLegendItem ' . $state['class'] . '">' . $state['display_short'] . '</div>';
+		print '<div class="tholdLegendItem ' . $state['class'] . '">' . html_escape($state['display_short']) . '</div>';
 	}
 
 	print '</div>';