Repository navigation
Fit status pills to their label and clear the status filter on a second pill click - #854
Merged
Merged
Conversation
…second click The status pills were being clipped to a fixed width because the single-class theme rules (e.g. .deviceUpFull width:14%, padding:3px) outranked the equal-specificity .thold-pill shape rule, so long labels such as 'Not Monitored' overflowed the coloured pill on the Device Status page. Element-qualify the selector (span.thold-pill) so the shape rule wins and the pill hugs its label in every theme. Also make a second click on an already-selected status pill clear that filter (reset the Status select to All, value -1) instead of re-applying the same value. Applied to all three thold_graph.php sub-tabs (Thresholds, Device Status, Threshold Log) and the matching Thresholds console page (thold.php).
TheWitness
requested review from
bmfmancini and
xmacan
and
a balanced review from Copilot
October 9, 2026 00:54
Contributor
There was a problem hiding this comment.
🟢 Approval recommended
The changes consistently implement the described behavior without identified regressions.
0 open findings
What changed in this PR
Updates status pills to size correctly and allows a second click to clear an active status filter.
Changes:
- Increases pill CSS specificity to override theme widths.
- Toggles status filters across all relevant views.
- Documents the changes.
| File | Description |
|---|---|
thold.php |
Adds filter-toggle behavior. |
thold_graph.php |
Adds toggling to all three sub-tabs. |
css/pills.css |
Ensures pills fit their labels. |
CHANGELOG.md |
Records both updates. |
🧠 Review effort: Balanced
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
bmfmancini
approved these changes
Oct 9, 2026
xmacan
approved these changes
Oct 9, 2026
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.
Summary
Two small follow-ups to the status-pill work (#851, #853).
Pills now fit their label
The pills were clipped to a fixed width on the Device Status page - long labels like Not Monitored overflowed the coloured pill. The cause is that each theme's single-class status rules (e.g.
.deviceUpFull { width: 14%; padding: 3px; }) have the same specificity as the shared.thold-pillshape rule but load later, so they won thewidth/paddingcascade.Fix: element-qualify the shape rule as
span.thold-pill(all pills are<span>s), raising its specificity above the single-class theme rules so the pill hugs its label in every theme. Shape-only; colours stay theme-aware.Second click clears the filter
Clicking a status pill filters the list to that status. Now a second click on an already-selected status clears that filter (resets the Status
<select>to All, value-1) instead of re-applying the same value. Applied to all threethold_graph.phpsub-tabs - Thresholds, Device Status and Threshold Log - and the matching Thresholds console page (thold.php), which shares the same pill handler.Testing / CI
php -l thold.php/php -l thold_graph.php- clean.tests/bin/validate-manifest.php- passes (no file-set change).locales/po/cacti.potis unchanged.functions.php/polling.php/setup.php) is touched, so Pest/patch-coverage are unaffected.