From 0b0ffa63179039358682ccede1ccb6f83be3bfae Mon Sep 17 00:00:00 2001
From: Pulse Monitor <pulse@pulse-monitor.dev>
Date: Fri, 29 Aug 2025 06:50:34 +0000
Subject: [PATCH] fix: resolve table column misalignment in flat list view

addresses #370 - changed from Show component to class-based hiding for the Node column to ensure proper table structure is maintained in both grouped and flat views. The Node column now always exists in the DOM but is hidden with CSS when not needed, preventing column shift issues.
---
 .../src/components/Dashboard/Dashboard.tsx         | 14 ++++++--------
 .../src/components/Dashboard/GuestRow.tsx          |  8 +++-----
 2 files changed, 9 insertions(+), 13 deletions(-)

diff --git a/frontend-modern/src/components/Dashboard/Dashboard.tsx b/frontend-modern/src/components/Dashboard/Dashboard.tsx
index 3a3919c13..a14666035 100644
--- a/frontend-modern/src/components/Dashboard/Dashboard.tsx
+++ b/frontend-modern/src/components/Dashboard/Dashboard.tsx
@@ -694,14 +694,12 @@ export function Dashboard(props: DashboardProps) {
                 >
                   VMID {sortKey() === 'vmid' && (sortDirection() === 'asc' ? '▲' : '▼')}
                 </th>
-                <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 ${groupingMode() === 'flat' ? '' : 'hidden'}`}
+                  onClick={() => handleSort('node')}
+                >
+                  Node {sortKey() === 'node' && (sortDirection() === 'asc' ? '▲' : '▼')}
+                </th>
                 <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 2d92565fa..1c26575d6 100644
--- a/frontend-modern/src/components/Dashboard/GuestRow.tsx
+++ b/frontend-modern/src/components/Dashboard/GuestRow.tsx
@@ -156,11 +156,9 @@ export function GuestRow(props: GuestRowProps) {
       </td>
 
       {/* Node (optional) */}
-      <Show when={props.showNode}>
-        <td class="p-1 px-2 text-sm text-gray-600 dark:text-gray-400">
-          {props.guest.node}
-        </td>
-      </Show>
+      <td class={`p-1 px-2 text-sm text-gray-600 dark:text-gray-400 ${props.showNode ? '' : 'hidden'}`}>
+        {props.guest.node}
+      </td>
 
       {/* Uptime */}
       <td class={`p-1 px-2 text-sm whitespace-nowrap ${