Repository navigation
thold: keep legend chips equal width using the longest label - #847
Merged
Merged
Conversation
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.
Contributor
There was a problem hiding this comment.
Copilot review overview
🟡 Changes recommended
Character counts do not reliably measure rendered label width, and independently sized flex rows still produce unequal chips.
Review effort: Balanced
Findings: 2
Open (3)
mb_strlen()measures code points, not the rendered width represented bych. With proportional… · New A shared minimum does not make flex items equal width across wrapped rows: each flex line… · New This assertion only verifies that some custom property is present, so values such as0chor the… · New
What changed in this PR
Updates status legends to derive a shared chip minimum from the longest label across all themes.
Changes:
- Calculates legend chip minimum widths in three renderers.
- Applies shared minimum widths across eight themes.
- Updates legend tests and changelog.
| File | Description |
|---|---|
includes/functions.php |
Calculates and emits chip minimum widths. |
tests/Unit/TholdLegendTest.php |
Updates legend markup assertions. |
css/classic.css |
Applies shared chip minimum. |
css/dark.css |
Applies shared chip minimum. |
css/deepness.css |
Applies shared chip minimum. |
css/midwinter.css |
Applies shared chip minimum. |
css/modern.css |
Applies shared chip minimum. |
css/paper-plane.css |
Applies shared chip minimum. |
css/paw.css |
Applies shared chip minimum. |
css/sunrise.css |
Applies shared chip minimum. |
CHANGELOG.md |
Records the legend refinement. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
xmacan
previously approved these changes
Oct 7, 2026
TheWitness
added a commit
that referenced
this pull request
Oct 7, 2026
…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.
…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.
TheWitness
force-pushed
the
feature/legend-equal-chips
branch
from
October 7, 2026 14:05
e438c7b to
edb0e03
Compare
xmacan
previously approved these changes
Oct 7, 2026
…ne 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.
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.
xmacan
approved these changes
Oct 7, 2026
2 tasks done
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.


Description
Makes the Thold, Host status and Log status legend chips stay equal width as the legend wraps responsively — the same refinement just applied to the Monitor plugin.
With
flex: 1 1 0and no shared minimum, each chip's floor was effectively its own text width, so the chips grew to different widths (and could clip their labels when space was tight). CSS can't measure the widest sibling, so the three legend renderers inincludes/functions.php(thold_legend(),host_legend(),log_legend()) now compute the longest label and emit it as a--thold-chip-minCSS variable (calc(<longest>ch + 1.5rem)). Every theme's.tholdLegendItemrule uses that as a sharedmin-width(falling back tomax-content).Because every chip shares the same minimum, the equal
flex-growresolves them to equal widths, and they wrap as a tidy grid.white-space: nowrapis retained, so labels never clip.Related Issue
Follow-up to the legend-chip restyle already on
develop.Motivation and Context
Keeps each legend reading as a clean, uniform key rather than a row of mismatched chip widths, especially once it wraps.
How Has This Been Tested?
php -lclean onincludes/functions.phpandtests/Unit/TholdLegendTest.php.TholdLegendTestassertions updated to match the new container markup; the three renderers stay covered (they're exercised by the existing tests), so the patch-coverage gate is satisfied. No new translatable strings.Types of changes
Checklist: