From 35a4cd41331652cba61c17f37b3a7e0ad583b998 Mon Sep 17 00:00:00 2001
From: TheWitness <thewitness@cacti.net>
Date: Sat, 10 Oct 2026 08:34:55 -0400
Subject: [PATCH] syslog status: stop card header reflow on tool/handle hover

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.
---
 css/search.css | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/css/search.css b/css/search.css
index f6711f03..70b7b38b 100644
--- a/css/search.css
+++ b/css/search.css
@@ -761,6 +761,9 @@
 }
 
 .syslogStatusCardHeader {
+	box-sizing: border-box;
+	/* fixed row height so a tool/handle hover highlight never reflows the header */
+	min-height: 34px;
 	display: flex;
 	align-items: center;
 	gap: 8px;
@@ -776,8 +779,10 @@
 /* Drag handle: grab the card by its header to reorder it. */
 .syslogStatusCardDrag {
 	flex: 0 0 auto;
+	box-sizing: border-box;
 	padding: 2px 5px;
-	border: 0;
+	/* reserve the border so a hover/focus highlight recolours it instead of resizing the header */
+	border: 1px solid transparent;
 	border-radius: 4px;
 	background: transparent;
 	color: color-mix(in srgb, currentColor 50%, transparent);
@@ -789,6 +794,7 @@
 .syslogStatusCardDrag:hover,
 .syslogStatusCardDrag:focus-visible {
 	color: currentColor;
+	border-color: transparent;
 	background: color-mix(in srgb, currentColor 12%, transparent);
 	outline: none;
 }
@@ -867,8 +873,10 @@
 }
 
 .syslogStatusCardTool {
+	box-sizing: border-box;
 	padding: 2px 5px;
-	border: 0;
+	/* reserve the border so a hover/focus highlight recolours it instead of resizing the header */
+	border: 1px solid transparent;
 	border-radius: 4px;
 	background: transparent;
 	color: color-mix(in srgb, currentColor 50%, transparent);
@@ -880,6 +888,7 @@
 .syslogStatusCardTool:hover,
 .syslogStatusCardTool:focus-visible {
 	color: currentColor;
+	border-color: transparent;
 	background: color-mix(in srgb, currentColor 12%, transparent);
 	outline: none;
 }