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.
This commit is contained in:
Pulse Monitor
2025-08-29 06:50:34 +00:00
parent 2e01d0d9f0
commit 0b0ffa6317
2 changed files with 9 additions and 13 deletions
@@ -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')}
@@ -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 ${