From 64e920ac1659c141bc976eefac46201a9c03861b Mon Sep 17 00:00:00 2001
From: Pulse Monitor <pulse@pulse-monitor.dev>
Date: Fri, 29 Aug 2025 06:56:16 +0000
Subject: [PATCH] fix: use SolidJS Show component for proper conditional
 rendering

addresses #370 - switched from JSX conditional expressions to SolidJS Show component for table column conditional rendering to ensure proper DOM updates
---
 frontend-modern/src/components/Dashboard/Dashboard.tsx | 4 ++--
 frontend-modern/src/components/Dashboard/GuestRow.tsx  | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend-modern/src/components/Dashboard/Dashboard.tsx b/frontend-modern/src/components/Dashboard/Dashboard.tsx
index 4d4fd357b..3a3919c13 100644
--- a/frontend-modern/src/components/Dashboard/Dashboard.tsx
+++ b/frontend-modern/src/components/Dashboard/Dashboard.tsx
@@ -694,14 +694,14 @@ export function Dashboard(props: DashboardProps) {
                 >
                   VMID {sortKey() === 'vmid' && (sortDirection() === 'asc' ? '▲' : '▼')}
                 </th>
-                {groupingMode() === 'flat' && (
+                <Show when={groupingMode() === 'flat'}>
                   <th 
                     class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[100px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                     onClick={() => handleSort('node')}
                   >
                     Node {sortKey() === 'node' && (sortDirection() === 'asc' ? '▲' : '▼')}
                   </th>
-                )}
+                </Show>
                 <th 
                   class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[100px] cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                   onClick={() => handleSort('uptime')}
diff --git a/frontend-modern/src/components/Dashboard/GuestRow.tsx b/frontend-modern/src/components/Dashboard/GuestRow.tsx
index 9d8592eed..2d92565fa 100644
--- a/frontend-modern/src/components/Dashboard/GuestRow.tsx
+++ b/frontend-modern/src/components/Dashboard/GuestRow.tsx
@@ -156,11 +156,11 @@ export function GuestRow(props: GuestRowProps) {
       </td>
 
       {/* Node (optional) */}
-      {props.showNode && (
+      <Show when={props.showNode}>
         <td class="p-1 px-2 text-sm text-gray-600 dark:text-gray-400">
           {props.guest.node}
         </td>
-      )}
+      </Show>
 
       {/* Uptime */}
       <td class={`p-1 px-2 text-sm whitespace-nowrap ${