From 48b86fd30f7faad32a1072fe9a5e12320b4bc227 Mon Sep 17 00:00:00 2001
From: Pulse Monitor <pulse@pulse-monitor.dev>
Date: Fri, 29 Aug 2025 14:10:09 +0000
Subject: [PATCH] fix: use classList for cleaner selection styling

- Changed from template string to classList binding for selection state
- Removed function call in isSelected to prevent reactivity issues
- Should eliminate gray border artifacts on unselected nodes
---
 .../src/components/shared/NodeSummaryTable.tsx        | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/frontend-modern/src/components/shared/NodeSummaryTable.tsx b/frontend-modern/src/components/shared/NodeSummaryTable.tsx
index 92548d3b5..52abd5f4f 100644
--- a/frontend-modern/src/components/shared/NodeSummaryTable.tsx
+++ b/frontend-modern/src/components/shared/NodeSummaryTable.tsx
@@ -169,15 +169,14 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
                 };
                 
                 const nodeId = isPVE ? node!.name : pbs!.name;
-                const isSelected = () => props.selectedNode === nodeId;
+                const isSelected = props.selectedNode === nodeId;
                 
                 return (
                   <tr 
-                    class={`hover:bg-gray-50 dark:hover:bg-gray-700/30 cursor-pointer transition-colors ${
-                      isSelected() 
-                        ? 'bg-blue-50 dark:bg-blue-900/20 border-l-4 border-l-blue-500 dark:border-l-blue-500' 
-                        : 'border-l-4 border-l-transparent'
-                    }`}
+                    class={`hover:bg-gray-50 dark:hover:bg-gray-700/30 cursor-pointer transition-colors`}
+                    classList={{
+                      'bg-blue-50 dark:bg-blue-900/20 border-l-4 border-l-blue-500': isSelected
+                    }}
                     onClick={() => props.onNodeClick(nodeId, item.type)}
                   >
                     <td class="px-2 py-0.5 whitespace-nowrap">