Repository navigation
syslog status: stop card header reflow on tool/handle hover - #408
Merged
Merged
Conversation
The drag handle and card tools used border:0, so a hover/focus border (from Cacti's global button styling) added width/height and reflowed the header. Reserve a transparent 1px border (box-sizing: border-box) so the highlight recolours it instead of resizing, keep that border transparent on hover/focus, and give the header a fixed min-height for a stable row.
TheWitness
requested review from
bmfmancini and
xmacan
and
a balanced review from Copilot
October 10, 2026 12:35
Contributor
There was a problem hiding this comment.
🟢 Approval recommended
The focused CSS changes correctly prevent border-induced layout shifts without altering behavior.
0 open findings
What changed in this PR
Stabilizes Syslog Status card headers when controls are hovered or focused.
Changes:
- Reserves transparent button borders to prevent size changes.
- Adds a stable minimum header height.
| File | Description |
|---|---|
css/search.css |
Prevents Status card header reflow during control interaction. |
🧠 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 10, 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.
Fixes a visual glitch on the Syslog Status tab: hovering (or focusing) a
card's drag handle — the hamburger — or any of its header tools made a border
appear and reflowed/resized the card header.
Cause:
.syslogStatusCardDragand.syslogStatusCardToolusedborder: 0, sowhen a hover/focus border is applied (Cacti's global button styling) it added
width/height and pushed the header around.
Fix (CSS only,
css/search.css):1px solid transparentborder (withbox-sizing: border-box) onthe handle and tool buttons so a hover/focus highlight recolours the reserved
border instead of changing the box size.
:hover/:focus-visibleso only the existingbackground highlight shows.
.syslogStatusCardHeadera fixedmin-heightfor a stable row height.No markup or behaviour changes.