Skip to content

thold: keep legend chips equal width using the longest label - #847

Merged
TheWitness merged 4 commits into
developfrom
feature/legend-equal-chips
Oct 7, 2026
Merged

TheWitness merged 4 commits into
developfrom
feature/legend-equal-chips

Conversation

@TheWitness

Copy link
Copy Markdown
Member

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 0 and 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 in includes/functions.php (thold_legend(), host_legend(), log_legend()) now compute the longest label and emit it as a --thold-chip-min CSS variable (calc(<longest>ch + 1.5rem)). Every theme's .tholdLegendItem rule uses that as a shared min-width (falling back to max-content).

Because every chip shares the same minimum, the equal flex-grow resolves them to equal widths, and they wrap as a tidy grid. white-space: nowrap is 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 -l clean on includes/functions.php and tests/Unit/TholdLegendTest.php.
  • All eight theme stylesheets remain brace-balanced.
  • TholdLegendTest assertions 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

  • New feature (non-breaking change which adds functionality)

Checklist:

  • My code follows the code style of this project.

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.
Copilot AI balanced review requested due to automatic review settings October 7, 2026 13:09

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 Medium severity · 1 Low severity

Open (3)
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.

Comment thread includes/functions.php
Comment thread includes/functions.php
Comment thread tests/Unit/TholdLegendTest.php Outdated
xmacan
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
TheWitness force-pushed the feature/legend-equal-chips branch from e438c7b to edb0e03 Compare October 7, 2026 14:05
xmacan
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.
@TheWitness
TheWitness merged commit d35a0e6 into develop Oct 7, 2026
3 checks passed
@TheWitness
TheWitness deleted the feature/legend-equal-chips branch October 7, 2026 17:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants