From 4083df1f47891709d8beb429322c26c164aea06c Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Thu, 25 Dec 2025 22:32:56 +0000
Subject: [PATCH] feat(mobile): optimize tables for mobile devices

- Implement horizontal scrolling for key tables (Dashboard, Storage, Backups, Docker, Node Summary).
- Ensure consistent column widths (140px fixed on desktop, 60px min on mobile) for metric columns (CPU, Memory, Disk).
- Switch Backups view from card to scrollable table for consistency.
- Reduce shell padding on mobile.
- Update ResourceTable (Alerts) with dedicated mobile view.
- Refine column visibility logic.
---
 .../src/components/Alerts/ResourceTable.tsx   | 2553 +++++++++--------
 .../src/components/Backups/UnifiedBackups.tsx |  127 +-
 .../src/components/Dashboard/Dashboard.tsx    |   14 +-
 .../src/components/Dashboard/GuestRow.tsx     |  140 +-
 .../Docker/DockerHostSummaryTable.tsx         |   56 +-
 .../components/Docker/DockerUnifiedTable.tsx  |   31 +-
 .../src/components/Storage/Storage.tsx        |   22 +-
 .../components/shared/NodeSummaryTable.tsx    |   37 +-
 .../src/hooks/useColumnVisibility.ts          |    2 +-
 frontend-modern/src/index.css                 |    2 +-
 10 files changed, 1532 insertions(+), 1452 deletions(-)

diff --git a/frontend-modern/src/components/Alerts/ResourceTable.tsx b/frontend-modern/src/components/Alerts/ResourceTable.tsx
index f937862243..7fc84d045f 100644
--- a/frontend-modern/src/components/Alerts/ResourceTable.tsx
+++ b/frontend-modern/src/components/Alerts/ResourceTable.tsx
@@ -1,4 +1,5 @@
 import { For, Show, createSignal, createEffect } from 'solid-js';
+import { useBreakpoint } from '@/hooks/useBreakpoint';
 import { TogglePrimitive } from '@/components/shared/Toggle';
 import { StatusBadge } from '@/components/shared/StatusBadge';
 import type { Alert } from '@/types/api';
@@ -149,6 +150,8 @@ interface ResourceTableProps {
 type OfflineState = 'off' | 'warning' | 'critical';
 
 export function ResourceTable(props: ResourceTableProps) {
+  const { isMobile } = useBreakpoint();
+
   const flattenResources = (): Resource[] => {
     if (props.groupedResources) {
       return Object.values(props.groupedResources).flat();
@@ -478,490 +481,1208 @@ export function ResourceTable(props: ResourceTableProps) {
     );
   };
 
+  const renderMobileView = () => (
+    <div class="space-y-4">
+      {/* Global Defaults - Mobile Card */}
+      <Show when={props.globalDefaults && props.setGlobalDefaults && props.setHasUnsavedChanges}>
+        <Card padding="sm" class="border border-blue-200 dark:border-blue-800 bg-blue-50/30 dark:bg-blue-900/10">
+          <div class="flex justify-between items-center mb-3">
+            <div class="flex items-center gap-2">
+              <span class="font-semibold text-sm">Global Defaults</span>
+              <Show when={hasCustomGlobalDefaults()}>
+                <span class="text-[10px] px-1.5 py-0.5 bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 rounded">Custom</span>
+              </Show>
+            </div>
+            <Show when={props.onToggleGlobalDisable}>
+              <TogglePrimitive size="sm" checked={!props.globalDisableFlag?.()} onToggle={() => { props.onToggleGlobalDisable?.(); props.setHasUnsavedChanges?.(true); }} />
+            </Show>
+          </div>
+
+          <div class="grid grid-cols-2 gap-2">
+            <For each={props.columns}>
+              {(column) => {
+                const metric = normalizeMetricKey(column);
+                const bounds = metricBounds(metric);
+                const val = () => props.globalDefaults?.[metric] ?? 0;
+                const isOff = () => val() === -1;
+                return (
+                  <div class="p-2 bg-white dark:bg-gray-800 rounded border border-gray-100 dark:border-gray-700 flex flex-col gap-1">
+                    <span class="text-[10px] uppercase text-gray-500 font-medium">{column}</span>
+                    <div class="relative">
+                      <input type="number" min={bounds.min} max={bounds.max} step={metricStep(metric)}
+                        value={isOff() ? '' : val()}
+                        placeholder={isOff() ? 'Off' : ''}
+                        disabled={isOff()}
+                        class={`w-full text-sm p-1 rounded border text-center ${isOff() ? 'bg-gray-100 dark:bg-gray-700' : 'bg-white dark:bg-gray-600 border-gray-200 dark:border-gray-500'}`}
+                        onInput={(e) => {
+                          const value = parseFloat(e.currentTarget.value);
+                          if (props.setGlobalDefaults) {
+                            props.setGlobalDefaults((prev) => ({ ...prev, [metric]: Number.isNaN(value) ? 0 : value }));
+                          }
+                          if (props.setHasUnsavedChanges) props.setHasUnsavedChanges(true);
+                        }}
+                      />
+                      <Show when={isOff()}>
+                        <button type="button" class="absolute inset-0 w-full" onClick={() => {
+                          if (!props.setGlobalDefaults) return;
+                          props.setGlobalDefaults((prev) => ({ ...prev, [metric]: getEnabledDefaultValue(metric) }));
+                          props.setHasUnsavedChanges?.(true);
+                        }}></button>
+                      </Show>
+                    </div>
+                  </div>
+                )
+              }}
+            </For>
+          </div>
+        </Card>
+      </Show>
+
+      <For
+        each={
+          props.groupedResources
+            ? Object.entries(props.groupedResources).sort(([a], [b]) => a.localeCompare(b))
+            : [['default', props.resources || []]]
+        }
+      >
+        {([groupName, resources]) => (
+          <div class="space-y-2">
+            <Show when={props.groupedResources}>
+              <div class="px-1 font-medium text-xs text-gray-500 uppercase mt-4 mb-1">{renderGroupHeader(groupName, props.groupHeaderMeta?.[groupName])}</div>
+            </Show>
+            <For each={resources as Resource[]}>
+              {(resource) => {
+                const isEditing = () => props.editingId() === resource.id;
+                const thresholds = () => isEditing() ? props.editingThresholds() : (resource.thresholds ?? {});
+
+                // Helper logic duplicated/adapted for scope access
+                const displayValue = (metric: string): number => {
+                  const parseNumeric = (value: unknown): number | undefined => {
+                    if (value === undefined || value === null) return undefined;
+                    if (typeof value === 'number') return value;
+                    const parsed = Number(value);
+                    return Number.isFinite(parsed) ? parsed : undefined;
+                  };
+                  const extract = (source: Record<string, unknown> | undefined) => parseNumeric(source?.[metric]);
+                  const defaults = resource.defaults as Record<string, unknown> | undefined;
+
+                  if (isEditing()) {
+                    const edited = extract(thresholds() as Record<string, unknown>);
+                    if (edited !== undefined) return edited;
+                    const fallback = extract(defaults);
+                    return fallback !== undefined ? fallback : 0;
+                  }
+
+                  const liveValue = extract(resource.thresholds as Record<string, unknown> | undefined);
+                  if (liveValue !== undefined) return liveValue;
+                  const fallback = extract(defaults);
+                  return fallback !== undefined ? fallback : 0;
+                };
+
+                const isOverridden = (metric: string) => resource.thresholds?.[metric] !== undefined && resource.thresholds?.[metric] !== null;
+
+                return (
+                  <Card padding="sm" class={`flex flex-col gap-3 transition-opacity ${resource.disabled || props.globalDisableFlag?.() ? 'opacity-60' : ''}`}>
+                    {/* Header */}
+                    <div class="flex items-center justify-between">
+                      <div class="flex items-center gap-3 min-w-0">
+                        {/* Toggle */}
+                        <Show when={props.onToggleDisabled}>
+                          <div class="shrink-0 scale-90 origin-left">
+                            <TogglePrimitive
+                              size="sm"
+                              checked={!(props.globalDisableFlag?.() ?? false) && !resource.disabled}
+                              disabled={props.globalDisableFlag?.() ?? false}
+                              onToggle={() => !(props.globalDisableFlag?.() ?? false) && props.onToggleDisabled?.(resource.id)}
+                            />
+                          </div>
+                        </Show>
+
+                        {/* Name */}
+                        <div class="min-w-0 truncate">
+                          <div class="font-medium text-sm truncate">{resource.displayName || resource.name}</div>
+                          <Show when={resource.subtitle}><div class="text-xs text-gray-500 truncate">{resource.subtitle}</div></Show>
+                        </div>
+                      </div>
+
+                      {/* Actions */}
+                      <div class="flex gap-1 shrink-0">
+                        <Show when={!isEditing() && resource.type !== 'dockerHost'}>
+                          <button onClick={() => props.onEdit(resource.id, resource.thresholds ? { ...resource.thresholds } : {}, resource.defaults ? { ...resource.defaults } : {}, resource.note)} class="p-1.5 bg-blue-50 dark:bg-blue-900/30 text-blue-600 rounded">
+                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" /></svg>
+                          </button>
+                        </Show>
+                        <Show when={isEditing()}>
+                          <button onClick={() => { props.onCancelEdit(); setActiveMetricInput(null); }} class="p-1.5 bg-gray-100 dark:bg-gray-700 text-gray-600 rounded">
+                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" /></svg>
+                          </button>
+                          <button onClick={() => { props.onSaveEdit(resource.id); setActiveMetricInput(null); }} class="p-1.5 bg-green-50 dark:bg-green-900/30 text-green-600 rounded">
+                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>
+                          </button>
+                        </Show>
+                        <Show when={resource.hasOverride || (resource.type === 'node' && resource.disableConnectivity)}>
+                          <button onClick={() => props.onRemoveOverride(resource.id)} class="p-1.5 bg-red-50 dark:bg-red-900/30 text-red-600 rounded">
+                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" /></svg>
+                          </button>
+                        </Show>
+                      </div>
+                    </div>
+
+                    {/* Note editor in mobile */}
+                    <Show when={isEditing()}>
+                      <textarea
+                        class="w-full text-xs p-2 rounded border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800"
+                        rows={2}
+                        placeholder="Add a note..."
+                        value={props.editingNote()}
+                        onInput={(e) => props.setEditingNote(e.currentTarget.value)}
+                      />
+                    </Show>
+
+                    {/* Metrics Grid */}
+                    <div class="grid grid-cols-2 gap-2 text-sm border-t pt-2 dark:border-gray-700/50">
+                      <For each={props.columns}>
+                        {(column) => {
+                          const metric = normalizeMetricKey(column);
+                          // Check support
+                          if (!resourceSupportsMetric(resource.type, metric)) return null;
+
+                          const isDisabled = () => thresholds()?.[metric] === -1;
+                          const bounds = metricBounds(metric);
+
+                          return (
+                            <div class="flex justify-between items-center p-1.5 bg-gray-50 dark:bg-gray-800/50 rounded">
+                              <span class="text-[10px] text-gray-500 uppercase font-bold tracking-wider">{column.replace(/mb\/s|%|°c/gi, '').trim()}</span>
+
+                              <Show when={isEditing()} fallback={
+                                <div onClick={(e) => { e.stopPropagation(); setActiveMetricInput({ resourceId: resource.id, metric }); props.onEdit(resource.id, resource.thresholds ? { ...resource.thresholds } : {}, resource.defaults ? { ...resource.defaults } : {}, resource.note) }} class="font-mono text-xs font-medium cursor-pointer">
+                                  <MetricValueWithHeat resourceId={resource.id} metric={metric} value={displayValue(metric)} isOverridden={isOverridden(metric)} />
+                                </div>
+                              }>
+                                <input type="number" min={bounds.min} max={bounds.max}
+                                  value={thresholds()?.[metric] ?? ''}
+                                  placeholder={isDisabled() ? 'Off' : ''}
+                                  class="w-16 text-right text-xs p-1 rounded border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-900"
+                                  onInput={(e) => {
+                                    const val = parseFloat(e.currentTarget.value);
+                                    props.setEditingThresholds({ ...props.editingThresholds(), [metric]: Number.isNaN(val) ? undefined : val });
+                                  }}
+                                />
+                              </Show>
+                            </div>
+                          )
+                        }}
+                      </For>
+                    </div>
+                  </Card>
+                )
+              }}
+            </For>
+          </div>
+        )}
+      </For>
+      <Show when={!hasRows()}>
+        <div class="text-center p-8 text-gray-500 text-sm italic bg-gray-50 dark:bg-gray-800/50 rounded-lg">
+          {props.emptyMessage || 'No resources available.'}
+        </div>
+      </Show>
+    </div>
+  );
+
   return (
-    <Card
-      padding="none"
-      class="overflow-hidden border border-gray-200 dark:border-gray-700"
-      border={false}
-      tone="glass"
-    >
-      <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
-        <SectionHeader title={props.title} size="sm" />
-      </div>
-      <div class="overflow-x-auto">
-        <table class="w-full">
-          <thead>
-            <tr class="bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
-              <th class="px-3 py-2 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-16">
-                Alerts
-              </th>
-              <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                Resource
-              </th>
-              <For each={props.columns}>
-                {(column) => (
+    <Show when={!isMobile()} fallback={renderMobileView()}>
+      <Card
+        padding="none"
+        class="overflow-hidden border border-gray-200 dark:border-gray-700"
+        border={false}
+        tone="glass"
+      >
+        <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
+          <SectionHeader title={props.title} size="sm" />
+        </div>
+        <div class="overflow-x-auto">
+          <table class="w-full">
+            <thead>
+              <tr class="bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
+                <th class="px-3 py-2 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider w-16">
+                  Alerts
+                </th>
+                <th class="px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  Resource
+                </th>
+                <For each={props.columns}>
+                  {(column) => (
+                    <th
+                      class="px-3 py-2 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
+                      title={getColumnHeaderTooltip(column)}
+                    >
+                      {column}
+                    </th>
+                  )}
+                </For>
+                <Show when={props.showOfflineAlertsColumn}>
                   <th
                     class="px-3 py-2 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
-                    title={getColumnHeaderTooltip(column)}
+                    title={OFFLINE_ALERTS_TOOLTIP}
                   >
-                    {column}
+                    Offline Alerts
                   </th>
-                )}
-              </For>
-              <Show when={props.showOfflineAlertsColumn}>
-                <th
-                  class="px-3 py-2 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider"
-                  title={OFFLINE_ALERTS_TOOLTIP}
-                >
-                  Offline Alerts
+                </Show>
+                <th class="px-3 py-2 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  Actions
                 </th>
-              </Show>
-              <th class="px-3 py-2 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
-                Actions
-              </th>
-            </tr>
-          </thead>
-          <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
-            {/* Global Defaults Row */}
-            <Show
-              when={props.globalDefaults && props.setGlobalDefaults && props.setHasUnsavedChanges}
-            >
-              <tr
-                class={`bg-gray-50 dark:bg-gray-800/50 border-b border-gray-300 dark:border-gray-600 ${props.globalDisableFlag?.() ? 'opacity-40' : ''}`}
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-200 dark:divide-gray-700">
+              {/* Global Defaults Row */}
+              <Show
+                when={props.globalDefaults && props.setGlobalDefaults && props.setHasUnsavedChanges}
               >
-                <td class="p-1 px-2 text-center align-middle">
-                  <Show
-                    when={props.onToggleGlobalDisable}
-                    fallback={<span class="text-sm text-gray-400">-</span>}
-                  >
-                    <div class="flex items-center justify-center">
-                      <TogglePrimitive
-                        size="sm"
-                        checked={!props.globalDisableFlag?.()}
-                        onToggle={() => {
-                          props.onToggleGlobalDisable?.();
-                          props.setHasUnsavedChanges?.(true);
-                        }}
-                        class="my-[1px]"
-                        title="Global alerts toggle - disable all alerts for this resource type"
-                        ariaLabel="Global alerts toggle"
-                      />
-                    </div>
-                  </Show>
-                </td>
-                <td class="p-1 px-2">
-                  <div class="flex items-center gap-2">
-                    <span class="text-sm font-semibold text-gray-700 dark:text-gray-300">
-                      Global Defaults
-                    </span>
-                    <Show when={hasCustomGlobalDefaults()}>
-                      <span class="text-xs px-1.5 py-0.5 bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 rounded">
-                        Custom
-                      </span>
-                    </Show>
-                  </div>
-                </td>
-                <For each={props.columns}>
-                  {(column) => {
-                    const metric = normalizeMetricKey(column);
-                    const bounds = metricBounds(metric);
-                    const val = () => props.globalDefaults?.[metric] ?? 0;
-                    const isOff = () => val() === -1;
-
-                    return (
-                      <td class="p-1 px-2 text-center align-middle">
-                        <div class="relative flex justify-center w-full">
-                          <input
-                            type="number"
-                            min={bounds.min}
-                            max={bounds.max}
-                            step={metricStep(metric)}
-                            value={isOff() ? '' : val()}
-                            placeholder={isOff() ? 'Off' : ''}
-                            disabled={isOff()}
-                            onInput={(e) => {
-                              const value = parseFloat(e.currentTarget.value);
-                              if (props.setGlobalDefaults) {
-                                props.setGlobalDefaults((prev) => ({
-                                  ...prev,
-                                  [metric]: Number.isNaN(value) ? 0 : value,
-                                }));
-                              }
-                              if (props.setHasUnsavedChanges) {
-                                props.setHasUnsavedChanges(true);
-                              }
-                            }}
-                            class={`w-16 px-2 py-0.5 text-sm text-center border rounded ${isOff()
-                              ? 'border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-500 italic placeholder:text-gray-400 dark:placeholder:text-gray-500 placeholder:opacity-60 pointer-events-none'
-                              : 'border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:border-blue-500 focus:ring-1 focus:ring-blue-500'
-                              }`}
-                            title={
-                              isOff()
-                                ? 'Click to enable this metric'
-                                : 'Set to -1 to disable alerts for this metric'
-                            }
-                          />
-                          <Show when={isOff()}>
-                            <button
-                              type="button"
-                              class="absolute inset-0 w-full rounded cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400"
-                              onClick={() => {
-                                if (!props.setGlobalDefaults) return;
-                                props.setGlobalDefaults((prev) => ({
-                                  ...prev,
-                                  [metric]: getEnabledDefaultValue(metric),
-                                }));
-                                props.setHasUnsavedChanges?.(true);
-                              }}
-                              title="Click to enable this metric"
-                            >
-                              <span class="sr-only">Enable {column} default</span>
-                            </button>
-                          </Show>
-                        </div>
-                      </td>
-                    );
-                  }}
-                </For>
-                <Show when={props.showOfflineAlertsColumn}>
+                <tr
+                  class={`bg-gray-50 dark:bg-gray-800/50 border-b border-gray-300 dark:border-gray-600 ${props.globalDisableFlag?.() ? 'opacity-40' : ''}`}
+                >
                   <td class="p-1 px-2 text-center align-middle">
                     <Show
-                      when={props.onSetGlobalOfflineState}
-                      fallback={
-                        <Show
-                          when={props.onToggleGlobalDisableOffline}
-                          fallback={<span class="text-sm text-gray-400">-</span>}
-                        >
-                          {(() => {
-                            const defaultDisabled = props.globalDisableOfflineFlag?.() ?? false;
-                            return renderToggleBadge({
-                              isEnabled: !defaultDisabled,
-                              size: 'md',
-                              onToggle: () => {
-                                props.onToggleGlobalDisableOffline?.();
-                                props.setHasUnsavedChanges?.(true);
-                              },
-                              labelEnabled: 'On',
-                              labelDisabled: 'Off',
-                              titleEnabled:
-                                'Offline alerts currently enabled by default. Click to disable.',
-                              titleDisabled:
-                                'Offline alerts currently disabled by default. Click to enable.',
-                            });
-                          })()}
-                        </Show>
-                      }
+                      when={props.onToggleGlobalDisable}
+                      fallback={<span class="text-sm text-gray-400">-</span>}
                     >
-                      {(() => {
-                        const disabledGlobally = props.globalDisableFlag?.() ?? false;
-                        const defaultDisabled = props.globalDisableOfflineFlag?.() ?? false;
-                        const defaultSeverity = props.globalOfflineSeverity ?? 'warning';
-                        const state: OfflineState = defaultDisabled
-                          ? 'off'
-                          : defaultSeverity === 'critical'
-                            ? 'critical'
-                            : 'warning';
-
-                        return renderOfflineStateButton(state, disabledGlobally, () => {
-                          if (disabledGlobally) return;
-                          const next = nextOfflineState(state);
-                          props.onSetGlobalOfflineState?.(next);
-                        });
-                      })()}
+                      <div class="flex items-center justify-center">
+                        <TogglePrimitive
+                          size="sm"
+                          checked={!props.globalDisableFlag?.()}
+                          onToggle={() => {
+                            props.onToggleGlobalDisable?.();
+                            props.setHasUnsavedChanges?.(true);
+                          }}
+                          class="my-[1px]"
+                          title="Global alerts toggle - disable all alerts for this resource type"
+                          ariaLabel="Global alerts toggle"
+                        />
+                      </div>
                     </Show>
                   </td>
-                </Show>
-                <td class="p-1 px-2 text-center align-middle">
-                  <div class="flex items-center justify-center gap-1">
-                    <Show
-                      when={
-                        props.showDelayColumn && typeof props.onMetricDelayChange === 'function'
-                      }
-                    >
-                      <button
-                        type="button"
-                        onClick={() => setShowDelayRow(!showDelayRow())}
-                        class="p-1 text-gray-600 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 transition-colors"
-                        title={
-                          showDelayRow() ? 'Hide alert delay settings' : 'Show alert delay settings'
+                  <td class="p-1 px-2">
+                    <div class="flex items-center gap-2">
+                      <span class="text-sm font-semibold text-gray-700 dark:text-gray-300">
+                        Global Defaults
+                      </span>
+                      <Show when={hasCustomGlobalDefaults()}>
+                        <span class="text-xs px-1.5 py-0.5 bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 rounded">
+                          Custom
+                        </span>
+                      </Show>
+                    </div>
+                  </td>
+                  <For each={props.columns}>
+                    {(column) => {
+                      const metric = normalizeMetricKey(column);
+                      const bounds = metricBounds(metric);
+                      const val = () => props.globalDefaults?.[metric] ?? 0;
+                      const isOff = () => val() === -1;
+
+                      return (
+                        <td class="p-1 px-2 text-center align-middle">
+                          <div class="relative flex justify-center w-full">
+                            <input
+                              type="number"
+                              min={bounds.min}
+                              max={bounds.max}
+                              step={metricStep(metric)}
+                              value={isOff() ? '' : val()}
+                              placeholder={isOff() ? 'Off' : ''}
+                              disabled={isOff()}
+                              onInput={(e) => {
+                                const value = parseFloat(e.currentTarget.value);
+                                if (props.setGlobalDefaults) {
+                                  props.setGlobalDefaults((prev) => ({
+                                    ...prev,
+                                    [metric]: Number.isNaN(value) ? 0 : value,
+                                  }));
+                                }
+                                if (props.setHasUnsavedChanges) {
+                                  props.setHasUnsavedChanges(true);
+                                }
+                              }}
+                              class={`w-16 px-2 py-0.5 text-sm text-center border rounded ${isOff()
+                                ? 'border-gray-300 dark:border-gray-600 bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-500 italic placeholder:text-gray-400 dark:placeholder:text-gray-500 placeholder:opacity-60 pointer-events-none'
+                                : 'border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:border-blue-500 focus:ring-1 focus:ring-blue-500'
+                                }`}
+                              title={
+                                isOff()
+                                  ? 'Click to enable this metric'
+                                  : 'Set to -1 to disable alerts for this metric'
+                              }
+                            />
+                            <Show when={isOff()}>
+                              <button
+                                type="button"
+                                class="absolute inset-0 w-full rounded cursor-pointer focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-400"
+                                onClick={() => {
+                                  if (!props.setGlobalDefaults) return;
+                                  props.setGlobalDefaults((prev) => ({
+                                    ...prev,
+                                    [metric]: getEnabledDefaultValue(metric),
+                                  }));
+                                  props.setHasUnsavedChanges?.(true);
+                                }}
+                                title="Click to enable this metric"
+                              >
+                                <span class="sr-only">Enable {column} default</span>
+                              </button>
+                            </Show>
+                          </div>
+                        </td>
+                      );
+                    }}
+                  </For>
+                  <Show when={props.showOfflineAlertsColumn}>
+                    <td class="p-1 px-2 text-center align-middle">
+                      <Show
+                        when={props.onSetGlobalOfflineState}
+                        fallback={
+                          <Show
+                            when={props.onToggleGlobalDisableOffline}
+                            fallback={<span class="text-sm text-gray-400">-</span>}
+                          >
+                            {(() => {
+                              const defaultDisabled = props.globalDisableOfflineFlag?.() ?? false;
+                              return renderToggleBadge({
+                                isEnabled: !defaultDisabled,
+                                size: 'md',
+                                onToggle: () => {
+                                  props.onToggleGlobalDisableOffline?.();
+                                  props.setHasUnsavedChanges?.(true);
+                                },
+                                labelEnabled: 'On',
+                                labelDisabled: 'Off',
+                                titleEnabled:
+                                  'Offline alerts currently enabled by default. Click to disable.',
+                                titleDisabled:
+                                  'Offline alerts currently disabled by default. Click to enable.',
+                              });
+                            })()}
+                          </Show>
                         }
                       >
-                        <svg
-                          class={`w-4 h-4 transition-transform ${showDelayRow() ? 'rotate-180' : ''}`}
-                          fill="none"
-                          stroke="currentColor"
-                          viewBox="0 0 24 24"
-                        >
-                          <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M19 9l-7 7-7-7"
-                          />
-                        </svg>
-                      </button>
-                    </Show>
-                    <Show when={hasCustomGlobalDefaults() && props.onResetDefaults}>
-                      <button
-                        type="button"
-                        onClick={() => props.onResetDefaults?.()}
-                        class="p-1 text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors"
-                        title="Reset to factory defaults"
-                      >
-                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                          <path
-                            stroke-linecap="round"
-                            stroke-linejoin="round"
-                            stroke-width="2"
-                            d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-                          />
-                        </svg>
-                      </button>
-                    </Show>
-                    <Show when={!props.showDelayColumn && !hasCustomGlobalDefaults()}>
-                      <span class="text-sm text-gray-400">-</span>
-                    </Show>
-                  </div>
-                </td>
-              </tr>
-            </Show>
-            <Show
-              when={
-                showDelayRow() &&
-                props.showDelayColumn &&
-                typeof props.onMetricDelayChange === 'function'
-              }
-            >
-              <tr
-                class={`bg-gray-50 dark:bg-gray-800/50 border-b border-gray-300 dark:border-gray-600 ${props.globalDisableFlag?.() ? 'opacity-40' : ''}`}
-              >
-                <td class="p-1 px-2 text-center align-middle">
-                  <span class="text-sm text-gray-400">-</span>
-                </td>
-                <td class="p-1 px-2 align-middle">
-                  <span class="text-xs font-semibold uppercase tracking-wide text-gray-600 dark:text-gray-300">
-                    Alert Delay (s)
-                  </span>
-                </td>
-                <For each={props.columns}>
-                  {(column) => {
-                    const metric = normalizeMetricKey(column);
-                    const typeDefaultDelay = props.globalDelaySeconds ?? 5;
-                    const overrideDelay = metricDelayOverride(metric);
+                        {(() => {
+                          const disabledGlobally = props.globalDisableFlag?.() ?? false;
+                          const defaultDisabled = props.globalDisableOfflineFlag?.() ?? false;
+                          const defaultSeverity = props.globalOfflineSeverity ?? 'warning';
+                          const state: OfflineState = defaultDisabled
+                            ? 'off'
+                            : defaultSeverity === 'critical'
+                              ? 'critical'
+                              : 'warning';
 
-                    return (
-                      <td class="p-1 px-2 text-center align-middle">
-                        <div class="relative flex justify-center w-full">
-                          <input
-                            type="number"
-                            min="0"
-                            value={(() => {
-                              return overrideDelay !== undefined ? overrideDelay : '';
-                            })()}
-                            placeholder={String(typeDefaultDelay)}
-                            class="w-16 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-2 py-0.5 text-sm text-center text-gray-900 dark:text-gray-100 focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
-                            onInput={(e) => {
-                              const raw = e.currentTarget.value;
-                              if (raw === '') {
-                                props.onMetricDelayChange?.(metric, null);
-                                props.setHasUnsavedChanges?.(true);
-                              } else {
-                                const parsed = parseInt(raw, 10);
-                                if (Number.isNaN(parsed)) {
-                                  return;
-                                }
-                                const sanitized = Math.max(0, parsed);
-                                // If the value matches the default, clear the override
-                                if (sanitized === typeDefaultDelay) {
-                                  props.onMetricDelayChange?.(metric, null);
-                                } else {
-                                  props.onMetricDelayChange?.(metric, sanitized);
-                                }
-                                props.setHasUnsavedChanges?.(true);
-                              }
-                            }}
-                          />
-                        </div>
-                      </td>
-                    );
-                  }}
-                </For>
-                <Show when={props.showOfflineAlertsColumn}>
+                          return renderOfflineStateButton(state, disabledGlobally, () => {
+                            if (disabledGlobally) return;
+                            const next = nextOfflineState(state);
+                            props.onSetGlobalOfflineState?.(next);
+                          });
+                        })()}
+                      </Show>
+                    </td>
+                  </Show>
+                  <td class="p-1 px-2 text-center align-middle">
+                    <div class="flex items-center justify-center gap-1">
+                      <Show
+                        when={
+                          props.showDelayColumn && typeof props.onMetricDelayChange === 'function'
+                        }
+                      >
+                        <button
+                          type="button"
+                          onClick={() => setShowDelayRow(!showDelayRow())}
+                          class="p-1 text-gray-600 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300 transition-colors"
+                          title={
+                            showDelayRow() ? 'Hide alert delay settings' : 'Show alert delay settings'
+                          }
+                        >
+                          <svg
+                            class={`w-4 h-4 transition-transform ${showDelayRow() ? 'rotate-180' : ''}`}
+                            fill="none"
+                            stroke="currentColor"
+                            viewBox="0 0 24 24"
+                          >
+                            <path
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              d="M19 9l-7 7-7-7"
+                            />
+                          </svg>
+                        </button>
+                      </Show>
+                      <Show when={hasCustomGlobalDefaults() && props.onResetDefaults}>
+                        <button
+                          type="button"
+                          onClick={() => props.onResetDefaults?.()}
+                          class="p-1 text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 transition-colors"
+                          title="Reset to factory defaults"
+                        >
+                          <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path
+                              stroke-linecap="round"
+                              stroke-linejoin="round"
+                              stroke-width="2"
+                              d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                            />
+                          </svg>
+                        </button>
+                      </Show>
+                      <Show when={!props.showDelayColumn && !hasCustomGlobalDefaults()}>
+                        <span class="text-sm text-gray-400">-</span>
+                      </Show>
+                    </div>
+                  </td>
+                </tr>
+              </Show>
+              <Show
+                when={
+                  showDelayRow() &&
+                  props.showDelayColumn &&
+                  typeof props.onMetricDelayChange === 'function'
+                }
+              >
+                <tr
+                  class={`bg-gray-50 dark:bg-gray-800/50 border-b border-gray-300 dark:border-gray-600 ${props.globalDisableFlag?.() ? 'opacity-40' : ''}`}
+                >
                   <td class="p-1 px-2 text-center align-middle">
                     <span class="text-sm text-gray-400">-</span>
                   </td>
-                </Show>
-                <td class="p-1 px-2 text-center align-middle">
-                  <span class="text-sm text-gray-400">-</span>
-                </td>
-              </tr>
-            </Show>
-            <Show when={props.groupedResources}>
-              <For
-                each={Object.entries(props.groupedResources || {}).sort(([a], [b]) =>
-                  a.localeCompare(b),
-                )}
-              >
-                {([nodeName, resources]) => {
-                  const headerMeta = props.groupHeaderMeta?.[nodeName];
+                  <td class="p-1 px-2 align-middle">
+                    <span class="text-xs font-semibold uppercase tracking-wide text-gray-600 dark:text-gray-300">
+                      Alert Delay (s)
+                    </span>
+                  </td>
+                  <For each={props.columns}>
+                    {(column) => {
+                      const metric = normalizeMetricKey(column);
+                      const typeDefaultDelay = props.globalDelaySeconds ?? 5;
+                      const overrideDelay = metricDelayOverride(metric);
 
-                  return (
-                    <>
-                      {/* Node group header */}
-                      <tr class="bg-gray-50 dark:bg-gray-700/50">
-                        <td
-                          colspan={totalColumnCount()}
-                          class="p-1 px-2 text-xs font-medium text-gray-600 dark:text-gray-400"
-                        >
-                          {renderGroupHeader(nodeName, headerMeta)}
+                      return (
+                        <td class="p-1 px-2 text-center align-middle">
+                          <div class="relative flex justify-center w-full">
+                            <input
+                              type="number"
+                              min="0"
+                              value={(() => {
+                                return overrideDelay !== undefined ? overrideDelay : '';
+                              })()}
+                              placeholder={String(typeDefaultDelay)}
+                              class="w-16 rounded border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-2 py-0.5 text-sm text-center text-gray-900 dark:text-gray-100 focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+                              onInput={(e) => {
+                                const raw = e.currentTarget.value;
+                                if (raw === '') {
+                                  props.onMetricDelayChange?.(metric, null);
+                                  props.setHasUnsavedChanges?.(true);
+                                } else {
+                                  const parsed = parseInt(raw, 10);
+                                  if (Number.isNaN(parsed)) {
+                                    return;
+                                  }
+                                  const sanitized = Math.max(0, parsed);
+                                  // If the value matches the default, clear the override
+                                  if (sanitized === typeDefaultDelay) {
+                                    props.onMetricDelayChange?.(metric, null);
+                                  } else {
+                                    props.onMetricDelayChange?.(metric, sanitized);
+                                  }
+                                  props.setHasUnsavedChanges?.(true);
+                                }
+                              }}
+                            />
+                          </div>
                         </td>
-                      </tr>
-                      {/* Resources in this group */}
-                      <For each={resources}>
-                        {(resource) => {
-                          const isEditing = () => props.editingId() === resource.id;
-                          const thresholds = (): Record<string, number | undefined> => {
-                            if (isEditing()) {
-                              return props.editingThresholds();
-                            }
-                            return resource.thresholds ?? {};
-                          };
-                          const displayValue = (metric: string): number => {
-                            const parseNumeric = (value: unknown): number | undefined => {
-                              if (value === undefined || value === null) return undefined;
-                              if (typeof value === 'number') return value;
-                              const parsed = Number(value);
-                              return Number.isFinite(parsed) ? parsed : undefined;
-                            };
+                      );
+                    }}
+                  </For>
+                  <Show when={props.showOfflineAlertsColumn}>
+                    <td class="p-1 px-2 text-center align-middle">
+                      <span class="text-sm text-gray-400">-</span>
+                    </td>
+                  </Show>
+                  <td class="p-1 px-2 text-center align-middle">
+                    <span class="text-sm text-gray-400">-</span>
+                  </td>
+                </tr>
+              </Show>
+              <Show when={props.groupedResources}>
+                <For
+                  each={Object.entries(props.groupedResources || {}).sort(([a], [b]) =>
+                    a.localeCompare(b),
+                  )}
+                >
+                  {([nodeName, resources]) => {
+                    const headerMeta = props.groupHeaderMeta?.[nodeName];
 
-                            const extract = (source: Record<string, unknown> | undefined) =>
-                              parseNumeric(source?.[metric]);
-
-                            const defaults = resource.defaults as
-                              | Record<string, unknown>
-                              | undefined;
-
-                            if (isEditing()) {
-                              const edited = extract(thresholds() as Record<string, unknown>);
-                              if (edited !== undefined) {
-                                return edited;
+                    return (
+                      <>
+                        {/* Node group header */}
+                        <tr class="bg-gray-50 dark:bg-gray-700/50">
+                          <td
+                            colspan={totalColumnCount()}
+                            class="p-1 px-2 text-xs font-medium text-gray-600 dark:text-gray-400"
+                          >
+                            {renderGroupHeader(nodeName, headerMeta)}
+                          </td>
+                        </tr>
+                        {/* Resources in this group */}
+                        <For each={resources}>
+                          {(resource) => {
+                            const isEditing = () => props.editingId() === resource.id;
+                            const thresholds = (): Record<string, number | undefined> => {
+                              if (isEditing()) {
+                                return props.editingThresholds();
                               }
+                              return resource.thresholds ?? {};
+                            };
+                            const displayValue = (metric: string): number => {
+                              const parseNumeric = (value: unknown): number | undefined => {
+                                if (value === undefined || value === null) return undefined;
+                                if (typeof value === 'number') return value;
+                                const parsed = Number(value);
+                                return Number.isFinite(parsed) ? parsed : undefined;
+                              };
+
+                              const extract = (source: Record<string, unknown> | undefined) =>
+                                parseNumeric(source?.[metric]);
+
+                              const defaults = resource.defaults as
+                                | Record<string, unknown>
+                                | undefined;
+
+                              if (isEditing()) {
+                                const edited = extract(thresholds() as Record<string, unknown>);
+                                if (edited !== undefined) {
+                                  return edited;
+                                }
+                                const fallback = extract(defaults);
+                                return fallback !== undefined ? fallback : 0;
+                              }
+
+                              const liveValue = extract(
+                                resource.thresholds as Record<string, unknown> | undefined,
+                              );
+                              if (liveValue !== undefined) {
+                                return liveValue;
+                              }
+
                               const fallback = extract(defaults);
                               return fallback !== undefined ? fallback : 0;
-                            }
+                            };
+                            const isOverridden = (metric: string) => {
+                              return (
+                                resource.thresholds?.[metric] !== undefined &&
+                                resource.thresholds?.[metric] !== null
+                              );
+                            };
 
-                            const liveValue = extract(
-                              resource.thresholds as Record<string, unknown> | undefined,
-                            );
-                            if (liveValue !== undefined) {
-                              return liveValue;
-                            }
-
-                            const fallback = extract(defaults);
-                            return fallback !== undefined ? fallback : 0;
-                          };
-                          const isOverridden = (metric: string) => {
                             return (
-                              resource.thresholds?.[metric] !== undefined &&
-                              resource.thresholds?.[metric] !== null
-                            );
-                          };
-
-                          return (
-                            <tr
-                              class={`hover:bg-gray-50 dark:hover:bg-gray-900/50 transition-colors ${resource.disabled || props.globalDisableFlag?.() ? 'opacity-40' : ''}`}
-                            >
-                              {/* Alert toggle column */}
-                              <td class="p-1 px-2 text-center align-middle">
-                                <Show when={props.onToggleDisabled}>
-                                  {(() => {
-                                    const globallyDisabled = props.globalDisableFlag?.() ?? false;
-                                    const isChecked = !globallyDisabled && !resource.disabled;
-                                    return (
-                                      <div class="flex items-center justify-center">
-                                        <TogglePrimitive
-                                          size="sm"
-                                          checked={isChecked}
-                                          disabled={globallyDisabled}
-                                          onToggle={() =>
-                                            !globallyDisabled &&
-                                            props.onToggleDisabled?.(resource.id)
-                                          }
-                                          class="my-[1px]"
-                                          title={
-                                            globallyDisabled
-                                              ? 'Alerts disabled globally'
-                                              : resource.disabled
-                                                ? 'Click to enable alerts'
-                                                : 'Click to disable alerts'
-                                          }
-                                          ariaLabel={
-                                            isChecked
-                                              ? 'Alerts enabled for this resource'
-                                              : 'Alerts disabled for this resource'
+                              <tr
+                                class={`hover:bg-gray-50 dark:hover:bg-gray-900/50 transition-colors ${resource.disabled || props.globalDisableFlag?.() ? 'opacity-40' : ''}`}
+                              >
+                                {/* Alert toggle column */}
+                                <td class="p-1 px-2 text-center align-middle">
+                                  <Show when={props.onToggleDisabled}>
+                                    {(() => {
+                                      const globallyDisabled = props.globalDisableFlag?.() ?? false;
+                                      const isChecked = !globallyDisabled && !resource.disabled;
+                                      return (
+                                        <div class="flex items-center justify-center">
+                                          <TogglePrimitive
+                                            size="sm"
+                                            checked={isChecked}
+                                            disabled={globallyDisabled}
+                                            onToggle={() =>
+                                              !globallyDisabled &&
+                                              props.onToggleDisabled?.(resource.id)
+                                            }
+                                            class="my-[1px]"
+                                            title={
+                                              globallyDisabled
+                                                ? 'Alerts disabled globally'
+                                                : resource.disabled
+                                                  ? 'Click to enable alerts'
+                                                  : 'Click to disable alerts'
+                                            }
+                                            ariaLabel={
+                                              isChecked
+                                                ? 'Alerts enabled for this resource'
+                                                : 'Alerts disabled for this resource'
+                                            }
+                                          />
+                                        </div>
+                                      );
+                                    })()}
+                                  </Show>
+                                </td>
+                                <td class="p-1 px-2">
+                                  <div class="flex items-center gap-2 min-w-0">
+                                    <Show
+                                      when={resource.type === 'node'}
+                                      fallback={
+                                        <span
+                                          class={`text-sm font-medium truncate flex-nowrap ${resource.disabled ? 'text-gray-500 dark:text-gray-500' : 'text-gray-900 dark:text-gray-100'}`}
+                                        >
+                                          {resource.name}
+                                        </span>
+                                      }
+                                    >
+                                      <div
+                                        class="flex items-center gap-3 min-w-0"
+                                        title={resource.status || undefined}
+                                      >
+                                        <Show
+                                          when={resource.host}
+                                          fallback={
+                                            <span
+                                              class={`text-sm font-medium truncate flex-nowrap ${resource.disabled ? 'text-gray-500 dark:text-gray-500' : 'text-gray-900 dark:text-gray-100'}`}
+                                            >
+                                              {resource.type === 'node'
+                                                ? resource.name
+                                                : resource.displayName || resource.name}
+                                            </span>
                                           }
+                                        >
+                                          {(host) => (
+                                            <a
+                                              href={host() as string}
+                                              target="_blank"
+                                              rel="noopener noreferrer"
+                                              onClick={(e) => e.stopPropagation()}
+                                              class={`text-sm font-medium truncate flex-nowrap transition-colors duration-150 ${resource.disabled
+                                                ? 'text-gray-500 dark:text-gray-500'
+                                                : 'text-gray-900 dark:text-gray-100 hover:text-sky-600 dark:hover:text-sky-400'
+                                                }`}
+                                              title={`Open ${resource.displayName || resource.name} web interface`}
+                                            >
+                                              {resource.type === 'node'
+                                                ? resource.name
+                                                : resource.displayName || resource.name}
+                                            </a>
+                                          )}
+                                        </Show>
+                                        <Show when={resource.clusterName}>
+                                          <span class="rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300">
+                                            {resource.clusterName}
+                                          </span>
+                                        </Show>
+                                      </div>
+                                    </Show>
+                                    <Show when={resource.subtitle}>
+                                      <span class="text-xs text-gray-500 dark:text-gray-400">
+                                        {resource.subtitle as string}
+                                      </span>
+                                    </Show>
+                                    <Show when={resource.hasOverride || resource.disableConnectivity}>
+                                      <span class="text-xs px-1.5 py-0.5 bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 rounded">
+                                        Custom
+                                      </span>
+                                    </Show>
+                                    <Show when={isEditing()}>
+                                      <div class="mt-2 w-full">
+                                        <label class="sr-only" for={`note-${resource.id}`}>
+                                          Override note
+                                        </label>
+                                        <textarea
+                                          id={`note-${resource.id}`}
+                                          class="w-full rounded border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
+                                          rows={2}
+                                          placeholder="Add a note about this override (optional)"
+                                          value={props.editingNote()}
+                                          onInput={(e) => props.setEditingNote(e.currentTarget.value)}
                                         />
                                       </div>
+                                    </Show>
+                                    <Show when={!isEditing() && resource.note}>
+                                      <p class="mt-2 text-xs italic text-gray-500 dark:text-gray-400 break-words">
+                                        {resource.note as string}
+                                      </p>
+                                    </Show>
+                                  </div>
+                                </td>
+                                {/* Metric columns - dynamically rendered based on resource type */}
+                                <For each={props.columns}>
+                                  {(column) => {
+                                    const metric = normalizeMetricKey(column);
+                                    const showMetric = () =>
+                                      resourceSupportsMetric(resource.type, metric);
+                                    const bounds = metricBounds(metric);
+                                    const isDisabled = () => thresholds()?.[metric] === -1;
+
+                                    const openMetricEditor = (e: MouseEvent) => {
+                                      e.stopPropagation();
+                                      setActiveMetricInput({ resourceId: resource.id, metric });
+                                      props.onEdit(
+                                        resource.id,
+                                        resource.thresholds ? { ...resource.thresholds } : {},
+                                        resource.defaults ? { ...resource.defaults } : {},
+                                        typeof resource.note === 'string' ? resource.note : undefined,
+                                      );
+                                    };
+
+                                    return (
+                                      <td class="p-1 px-2 text-center align-middle">
+                                        <Show
+                                          when={showMetric()}
+                                          fallback={
+                                            <span class="text-sm text-gray-400 dark:text-gray-500">
+                                              -
+                                            </span>
+                                          }
+                                        >
+                                          <Show
+                                            when={isEditing()}
+                                            fallback={
+                                              <div
+                                                onClick={(event) => {
+                                                  openMetricEditor(event);
+                                                }}
+                                                class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 rounded px-1 py-0.5 transition-colors"
+                                                title="Click to edit this metric"
+                                              >
+                                                <MetricValueWithHeat
+                                                  resourceId={resource.id}
+                                                  metric={metric}
+                                                  value={displayValue(metric)}
+                                                  isOverridden={isOverridden(metric)}
+                                                />
+                                              </div>
+                                            }
+                                          >
+                                            <div class="flex w-full items-center gap-3">
+                                              <Show when={SLIDER_METRICS.has(metric)}>
+                                                {(() => {
+                                                  const sliderMin =
+                                                    metric === 'temperature'
+                                                      ? Math.max(0, bounds.min)
+                                                      : Math.max(0, bounds.min);
+                                                  const sliderMax =
+                                                    metric === 'temperature'
+                                                      ? Math.max(
+                                                        sliderMin,
+                                                        bounds.max > 0 ? bounds.max : 120,
+                                                      )
+                                                      : bounds.max;
+                                                  const defaultSliderValue = () => {
+                                                    if (metric === 'disk') return 90;
+                                                    if (metric === 'memory') return 85;
+                                                    if (metric === 'temperature') return 80;
+                                                    return 80;
+                                                  };
+                                                  const currentSliderValue = () => {
+                                                    const editingVal =
+                                                      props.editingThresholds()?.[metric];
+                                                    if (
+                                                      typeof editingVal === 'number' &&
+                                                      editingVal >= 0
+                                                    ) {
+                                                      return Math.round(editingVal);
+                                                    }
+                                                    const displayVal = displayValue(metric);
+                                                    if (
+                                                      typeof displayVal === 'number' &&
+                                                      displayVal >= 0
+                                                    ) {
+                                                      return Math.round(displayVal);
+                                                    }
+                                                    return defaultSliderValue();
+                                                  };
+                                                  return (
+                                                    <div class="w-36">
+                                                      <ThresholdSlider
+                                                        value={Math.max(
+                                                          sliderMin,
+                                                          Math.min(sliderMax, currentSliderValue()),
+                                                        )}
+                                                        onChange={(val) => {
+                                                          props.setEditingThresholds({
+                                                            ...props.editingThresholds(),
+                                                            [metric]: val,
+                                                          });
+                                                        }}
+                                                        type={
+                                                          metric === 'temperature'
+                                                            ? 'temperature'
+                                                            : (metric as 'cpu' | 'memory' | 'disk')
+                                                        }
+                                                        min={sliderMin}
+                                                        max={sliderMax}
+                                                      />
+                                                    </div>
+                                                  );
+                                                })()}
+                                              </Show>
+                                              <div class="flex items-center justify-center">
+                                                <input
+                                                  type="number"
+                                                  min={bounds.min}
+                                                  max={bounds.max}
+                                                  step={metricStep(metric)}
+                                                  value={thresholds()?.[metric] ?? ''}
+                                                  placeholder={isDisabled() ? 'Off' : ''}
+                                                  title="Set to -1 to disable alerts for this metric"
+                                                  ref={(el) => {
+                                                    if (
+                                                      isEditing() &&
+                                                      activeMetricInput()?.resourceId ===
+                                                      resource.id &&
+                                                      activeMetricInput()?.metric === metric
+                                                    ) {
+                                                      queueMicrotask(() => {
+                                                        el.focus();
+                                                        el.select();
+                                                      });
+                                                    }
+                                                  }}
+                                                  onInput={(e) => {
+                                                    const raw = e.currentTarget.value;
+                                                    if (raw === '') {
+                                                      props.setEditingThresholds({
+                                                        ...props.editingThresholds(),
+                                                        [metric]: undefined,
+                                                      });
+                                                      return;
+                                                    }
+                                                    const val = parseFloat(raw);
+                                                    if (!Number.isNaN(val)) {
+                                                      props.setEditingThresholds({
+                                                        ...props.editingThresholds(),
+                                                        [metric]: val,
+                                                      });
+                                                    }
+                                                  }}
+                                                  onBlur={() => {
+                                                    if (props.editingId() === resource.id) {
+                                                      props.onSaveEdit(resource.id);
+                                                    }
+                                                    setActiveMetricInput(null);
+                                                  }}
+                                                  class={`w-16 px-2 py-0.5 text-sm text-center border rounded ${isDisabled()
+                                                    ? 'bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-600 border-gray-300 dark:border-gray-600'
+                                                    : 'bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 border-gray-300 dark:border-gray-600'
+                                                    }`}
+                                                />
+                                              </div>
+                                            </div>
+                                          </Show>
+                                        </Show>
+                                      </td>
                                     );
-                                  })()}
+                                  }}
+                                </For>
+
+                                {/* Offline Alerts column - Connectivity/powered-off alerts */}
+                                <Show when={props.showOfflineAlertsColumn}>
+                                  <td class="p-1 px-2 text-center align-middle">
+                                    {(() => {
+                                      const disabledGlobally = props.globalDisableFlag?.() ?? false;
+                                      const supportsTriState =
+                                        typeof props.onSetOfflineState === 'function' &&
+                                        (resource.type === 'guest' ||
+                                          resource.type === 'dockerContainer');
+
+                                      if (supportsTriState) {
+                                        const defaultDisabled =
+                                          props.globalDisableOfflineFlag?.() ?? false;
+                                        const defaultSeverity =
+                                          props.globalOfflineSeverity ?? 'warning';
+
+                                        let state: OfflineState;
+                                        if (resource.disableConnectivity) {
+                                          state = 'off';
+                                        } else if (resource.poweredOffSeverity) {
+                                          state = resource.poweredOffSeverity;
+                                        } else if (defaultDisabled) {
+                                          state = 'off';
+                                        } else {
+                                          state =
+                                            defaultSeverity === 'critical' ? 'critical' : 'warning';
+                                        }
+
+                                        return renderOfflineStateButton(
+                                          state,
+                                          disabledGlobally,
+                                          () => {
+                                            if (disabledGlobally) return;
+                                            const next = nextOfflineState(state);
+                                            props.onSetOfflineState?.(resource.id, next);
+                                          },
+                                        );
+                                      }
+
+                                      if (!props.onToggleNodeConnectivity) {
+                                        return <span class="text-sm text-gray-400">-</span>;
+                                      }
+
+                                      const globalOfflineDisabled =
+                                        props.globalDisableOfflineFlag?.() ?? false;
+                                      return renderToggleBadge({
+                                        isEnabled:
+                                          !globalOfflineDisabled && !resource.disableConnectivity,
+                                        disabled: disabledGlobally,
+                                        onToggle: () => {
+                                          if (disabledGlobally) return;
+                                          props.onToggleNodeConnectivity?.(resource.id);
+                                        },
+                                        titleEnabled:
+                                          'Offline alerts enabled. Click to disable for this resource.',
+                                        titleDisabled:
+                                          'Offline alerts disabled. Click to enable for this resource.',
+                                        titleWhenDisabled: 'Offline alerts controlled globally',
+                                      });
+                                    })()}
+                                  </td>
                                 </Show>
-                              </td>
-                              <td class="p-1 px-2">
-                                <div class="flex items-center gap-2 min-w-0">
+
+                                {/* Actions column */}
+                                <td class="p-1 px-2">
+                                  <div class="flex items-center justify-center gap-1">
+                                    <Show
+                                      when={!isEditing()}
+                                      fallback={
+                                        <button
+                                          type="button"
+                                          onClick={() => {
+                                            props.onCancelEdit();
+                                            setActiveMetricInput(null);
+                                          }}
+                                          class="p-1 text-gray-600 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
+                                          title="Cancel editing"
+                                        >
+                                          <svg
+                                            class="w-4 h-4"
+                                            fill="none"
+                                            stroke="currentColor"
+                                            viewBox="0 0 24 24"
+                                          >
+                                            <path
+                                              stroke-linecap="round"
+                                              stroke-linejoin="round"
+                                              stroke-width="2"
+                                              d="M6 18L18 6M6 6l12 12"
+                                            />
+                                          </svg>
+                                        </button>
+                                      }
+                                    >
+                                      <Show when={resource.type !== 'dockerHost'}>
+                                        <button
+                                          type="button"
+                                          onClick={() =>
+                                            props.onEdit(
+                                              resource.id,
+                                              resource.thresholds ? { ...resource.thresholds } : {},
+                                              resource.defaults ? { ...resource.defaults } : {},
+                                              typeof resource.note === 'string' ? resource.note : undefined,
+                                            )
+                                          }
+                                          class="p-1 text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
+                                          title="Edit thresholds"
+                                        >
+                                          <svg
+                                            class="w-4 h-4"
+                                            fill="none"
+                                            stroke="currentColor"
+                                            viewBox="0 0 24 24"
+                                          >
+                                            <path
+                                              stroke-linecap="round"
+                                              stroke-linejoin="round"
+                                              stroke-width="2"
+                                              d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
+                                            />
+                                          </svg>
+                                        </button>
+                                      </Show>
+                                      <Show
+                                        when={
+                                          resource.hasOverride ||
+                                          ((resource.type === 'node' ||
+                                            resource.type === 'dockerHost') &&
+                                            resource.disableConnectivity)
+                                        }
+                                      >
+                                        <button
+                                          type="button"
+                                          onClick={() => props.onRemoveOverride(resource.id)}
+                                          class="p-1 text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
+                                          title="Remove override"
+                                        >
+                                          <svg
+                                            class="w-4 h-4"
+                                            fill="none"
+                                            stroke="currentColor"
+                                            viewBox="0 0 24 24"
+                                          >
+                                            <path
+                                              stroke-linecap="round"
+                                              stroke-linejoin="round"
+                                              stroke-width="2"
+                                              d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                                            />
+                                          </svg>
+                                        </button>
+                                      </Show>
+                                    </Show>
+                                  </div>
+                                </td>
+                              </tr>
+                            );
+                          }}
+                        </For>
+                      </>
+                    );
+                  }}
+                </For>
+              </Show>
+              <Show when={!props.groupedResources && props.resources}>
+                <Show
+                  when={props.resources && props.resources.length === 0}
+                  fallback={
+                    <For each={props.resources}>
+                      {(resource) => {
+                        const isEditing = () => props.editingId() === resource.id;
+                        const thresholds = (): Record<string, number | undefined> => {
+                          if (isEditing()) {
+                            return props.editingThresholds();
+                          }
+                          return resource.thresholds ?? {};
+                        };
+                        const displayValue = (metric: string): number => {
+                          const parseNumeric = (value: unknown): number | undefined => {
+                            if (value === undefined || value === null) return undefined;
+                            if (typeof value === 'number') return value;
+                            const parsed = Number(value);
+                            return Number.isFinite(parsed) ? parsed : undefined;
+                          };
+
+                          const extract = (source: Record<string, unknown> | undefined) =>
+                            parseNumeric(source?.[metric]);
+
+                          const defaults = resource.defaults as Record<string, unknown> | undefined;
+
+                          if (isEditing()) {
+                            const edited = extract(thresholds() as Record<string, unknown>);
+                            if (edited !== undefined) {
+                              return edited;
+                            }
+                            const fallback = extract(defaults);
+                            return fallback !== undefined ? fallback : 0;
+                          }
+
+                          const liveValue = extract(
+                            resource.thresholds as Record<string, unknown> | undefined,
+                          );
+                          if (liveValue !== undefined) {
+                            return liveValue;
+                          }
+
+                          const fallback = extract(defaults);
+                          return fallback !== undefined ? fallback : 0;
+                        };
+                        const isOverridden = (metric: string) => {
+                          return (
+                            resource.thresholds?.[metric] !== undefined &&
+                            resource.thresholds?.[metric] !== null
+                          );
+                        };
+
+                        return (
+                          <tr
+                            class={`hover:bg-gray-50 dark:hover:bg-gray-900/50 transition-colors ${resource.disabled || props.globalDisableFlag?.() ? 'opacity-40' : ''}`}
+                          >
+                            {/* Alert toggle column */}
+                            <td class="p-1 px-2 text-center align-middle">
+                              <Show when={props.onToggleDisabled}>
+                                {(() => {
+                                  const globallyDisabled = props.globalDisableFlag?.() ?? false;
+                                  const isChecked = !globallyDisabled && !resource.disabled;
+                                  return (
+                                    <div class="flex items-center justify-center">
+                                      <TogglePrimitive
+                                        size="sm"
+                                        checked={isChecked}
+                                        disabled={globallyDisabled}
+                                        onToggle={() =>
+                                          !globallyDisabled && props.onToggleDisabled?.(resource.id)
+                                        }
+                                        class="my-[1px]"
+                                        title={
+                                          globallyDisabled
+                                            ? 'Alerts disabled globally'
+                                            : resource.disabled
+                                              ? 'Click to enable alerts'
+                                              : 'Click to disable alerts'
+                                        }
+                                        ariaLabel={
+                                          isChecked
+                                            ? 'Alerts enabled for this resource'
+                                            : 'Alerts disabled for this resource'
+                                        }
+                                      />
+                                    </div>
+                                  );
+                                })()}
+                              </Show>
+                            </td>
+                            <td class="p-1 px-2">
+                              <Show
+                                when={resource.type === 'node'}
+                                fallback={
+                                  <div class="flex items-center gap-2 min-w-0">
+                                    <span
+                                      class={`text-sm font-medium truncate flex-nowrap ${resource.disabled ? 'text-gray-500 dark:text-gray-500' : 'text-gray-900 dark:text-gray-100'}`}
+                                    >
+                                      {resource.name}
+                                    </span>
+                                    <Show when={resource.hasOverride || resource.disableConnectivity}>
+                                      <span class="text-xs px-1.5 py-0.5 bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 rounded">
+                                        Custom
+                                      </span>
+                                    </Show>
+                                  </div>
+                                }
+                              >
+                                <div
+                                  class="flex items-center gap-3 min-w-0"
+                                  title={resource.status || undefined}
+                                >
                                   <Show
-                                    when={resource.type === 'node'}
+                                    when={resource.host}
                                     fallback={
                                       <span
                                         class={`text-sm font-medium truncate flex-nowrap ${resource.disabled ? 'text-gray-500 dark:text-gray-500' : 'text-gray-900 dark:text-gray-100'}`}
                                       >
-                                        {resource.name}
+                                        {resource.type === 'node'
+                                          ? resource.name
+                                          : resource.displayName || resource.name}
                                       </span>
                                     }
                                   >
-                                    <div
-                                      class="flex items-center gap-3 min-w-0"
-                                      title={resource.status || undefined}
-                                    >
-                                      <Show
-                                        when={resource.host}
-                                        fallback={
-                                          <span
-                                            class={`text-sm font-medium truncate flex-nowrap ${resource.disabled ? 'text-gray-500 dark:text-gray-500' : 'text-gray-900 dark:text-gray-100'}`}
-                                          >
-                                            {resource.type === 'node'
-                                              ? resource.name
-                                              : resource.displayName || resource.name}
-                                          </span>
-                                        }
+                                    {(host) => (
+                                      <a
+                                        href={host() as string}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        onClick={(e) => e.stopPropagation()}
+                                        class={`text-sm font-medium truncate flex-nowrap transition-colors duration-150 ${resource.disabled
+                                          ? 'text-gray-500 dark:text-gray-500'
+                                          : 'text-gray-900 dark:text-gray-100 hover:text-sky-600 dark:hover:text-sky-400'
+                                          }`}
+                                        title={`Open ${resource.displayName || resource.name} web interface`}
                                       >
-                                        {(host) => (
-                                          <a
-                                            href={host() as string}
-                                            target="_blank"
-                                            rel="noopener noreferrer"
-                                            onClick={(e) => e.stopPropagation()}
-                                            class={`text-sm font-medium truncate flex-nowrap transition-colors duration-150 ${resource.disabled
-                                              ? 'text-gray-500 dark:text-gray-500'
-                                              : 'text-gray-900 dark:text-gray-100 hover:text-sky-600 dark:hover:text-sky-400'
-                                              }`}
-                                            title={`Open ${resource.displayName || resource.name} web interface`}
-                                          >
-                                            {resource.type === 'node'
-                                              ? resource.name
-                                              : resource.displayName || resource.name}
-                                          </a>
-                                        )}
-                                      </Show>
-                                      <Show when={resource.clusterName}>
-                                        <span class="rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300">
-                                          {resource.clusterName}
-                                        </span>
-                                      </Show>
-                                    </div>
+                                        {resource.type === 'node'
+                                          ? resource.name
+                                          : resource.displayName || resource.name}
+                                      </a>
+                                    )}
                                   </Show>
-                                  <Show when={resource.subtitle}>
-                                    <span class="text-xs text-gray-500 dark:text-gray-400">
-                                      {resource.subtitle as string}
+                                  <Show when={resource.clusterName}>
+                                    <span class="rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300">
+                                      {resource.clusterName}
                                     </span>
                                   </Show>
                                   <Show when={resource.hasOverride || resource.disableConnectivity}>
@@ -969,265 +1690,187 @@ export function ResourceTable(props: ResourceTableProps) {
                                       Custom
                                     </span>
                                   </Show>
-                                  <Show when={isEditing()}>
-                                    <div class="mt-2 w-full">
-                                      <label class="sr-only" for={`note-${resource.id}`}>
-                                        Override note
-                                      </label>
-                                      <textarea
-                                        id={`note-${resource.id}`}
-                                        class="w-full rounded border border-gray-300 bg-white px-2 py-1 text-xs text-gray-700 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-200"
-                                        rows={2}
-                                        placeholder="Add a note about this override (optional)"
-                                        value={props.editingNote()}
-                                        onInput={(e) => props.setEditingNote(e.currentTarget.value)}
-                                      />
-                                    </div>
-                                  </Show>
-                                  <Show when={!isEditing() && resource.note}>
-                                    <p class="mt-2 text-xs italic text-gray-500 dark:text-gray-400 break-words">
-                                      {resource.note as string}
-                                    </p>
-                                  </Show>
                                 </div>
-                              </td>
-                              {/* Metric columns - dynamically rendered based on resource type */}
-                              <For each={props.columns}>
-                                {(column) => {
-                                  const metric = normalizeMetricKey(column);
-                                  const showMetric = () =>
-                                    resourceSupportsMetric(resource.type, metric);
-                                  const bounds = metricBounds(metric);
-                                  const isDisabled = () => thresholds()?.[metric] === -1;
+                              </Show>
+                            </td>
+                            {/* Metric columns - dynamically rendered based on resource type */}
+                            <For each={props.columns}>
+                              {(column) => {
+                                const metric = normalizeMetricKey(column);
 
-                                  const openMetricEditor = (e: MouseEvent) => {
-                                    e.stopPropagation();
-                                    setActiveMetricInput({ resourceId: resource.id, metric });
-                                    props.onEdit(
-                                      resource.id,
-                                      resource.thresholds ? { ...resource.thresholds } : {},
-                                      resource.defaults ? { ...resource.defaults } : {},
-                                      typeof resource.note === 'string' ? resource.note : undefined,
-                                    );
-                                  };
+                                // Check if this metric applies to this resource type
+                                const showMetric = () => {
+                                  if (
+                                    resource.type === 'node' &&
+                                    ['diskRead', 'diskWrite', 'networkIn', 'networkOut'].includes(
+                                      metric,
+                                    )
+                                  ) {
+                                    return false;
+                                  }
+                                  if (resource.type === 'pbs') {
+                                    // PBS only has CPU and Memory metrics
+                                    return ['cpu', 'memory'].includes(metric);
+                                  }
+                                  if (resource.type === 'storage') {
+                                    return metric === 'usage';
+                                  }
+                                  return true;
+                                };
 
-                                  return (
-                                    <td class="p-1 px-2 text-center align-middle">
+                                const isDisabled = () => thresholds()?.[metric] === -1;
+
+                                const openMetricEditor = (e: MouseEvent) => {
+                                  e.stopPropagation();
+                                  if (resource.editable === false) {
+                                    return;
+                                  }
+                                  setActiveMetricInput({ resourceId: resource.id, metric });
+                                  props.onEdit(
+                                    resource.id,
+                                    resource.thresholds ? { ...resource.thresholds } : {},
+                                    resource.defaults ? { ...resource.defaults } : {},
+                                    typeof resource.note === 'string' ? resource.note : undefined,
+                                  );
+                                };
+
+                                return (
+                                  <td class="p-1 px-2 text-center align-middle">
+                                    <Show
+                                      when={showMetric()}
+                                      fallback={
+                                        <span class="text-sm text-gray-400 dark:text-gray-500">
+                                          -
+                                        </span>
+                                      }
+                                    >
                                       <Show
-                                        when={showMetric()}
+                                        when={isEditing()}
                                         fallback={
-                                          <span class="text-sm text-gray-400 dark:text-gray-500">
-                                            -
-                                          </span>
+                                          <div
+                                            onClick={openMetricEditor}
+                                            class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 rounded px-1 py-0.5 transition-colors"
+                                            title="Click to edit this metric"
+                                          >
+                                            <MetricValueWithHeat
+                                              resourceId={resource.id}
+                                              metric={metric}
+                                              value={displayValue(metric)}
+                                              isOverridden={isOverridden(metric)}
+                                            />
+                                          </div>
                                         }
                                       >
-                                        <Show
-                                          when={isEditing()}
-                                          fallback={
-                                            <div
-                                              onClick={(event) => {
-                                                openMetricEditor(event);
-                                              }}
-                                              class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 rounded px-1 py-0.5 transition-colors"
-                                              title="Click to edit this metric"
-                                            >
-                                              <MetricValueWithHeat
-                                                resourceId={resource.id}
-                                                metric={metric}
-                                                value={displayValue(metric)}
-                                                isOverridden={isOverridden(metric)}
-                                              />
-                                            </div>
-                                          }
-                                        >
-                                          <div class="flex w-full items-center gap-3">
-                                            <Show when={SLIDER_METRICS.has(metric)}>
-                                              {(() => {
-                                                const sliderMin =
-                                                  metric === 'temperature'
-                                                    ? Math.max(0, bounds.min)
-                                                    : Math.max(0, bounds.min);
-                                                const sliderMax =
-                                                  metric === 'temperature'
-                                                    ? Math.max(
-                                                      sliderMin,
-                                                      bounds.max > 0 ? bounds.max : 120,
-                                                    )
-                                                    : bounds.max;
-                                                const defaultSliderValue = () => {
-                                                  if (metric === 'disk') return 90;
-                                                  if (metric === 'memory') return 85;
-                                                  if (metric === 'temperature') return 80;
-                                                  return 80;
-                                                };
-                                                const currentSliderValue = () => {
-                                                  const editingVal =
-                                                    props.editingThresholds()?.[metric];
-                                                  if (
-                                                    typeof editingVal === 'number' &&
-                                                    editingVal >= 0
-                                                  ) {
-                                                    return Math.round(editingVal);
-                                                  }
-                                                  const displayVal = displayValue(metric);
-                                                  if (
-                                                    typeof displayVal === 'number' &&
-                                                    displayVal >= 0
-                                                  ) {
-                                                    return Math.round(displayVal);
-                                                  }
-                                                  return defaultSliderValue();
-                                                };
-                                                return (
-                                                  <div class="w-36">
-                                                    <ThresholdSlider
-                                                      value={Math.max(
-                                                        sliderMin,
-                                                        Math.min(sliderMax, currentSliderValue()),
-                                                      )}
-                                                      onChange={(val) => {
-                                                        props.setEditingThresholds({
-                                                          ...props.editingThresholds(),
-                                                          [metric]: val,
-                                                        });
-                                                      }}
-                                                      type={
-                                                        metric === 'temperature'
-                                                          ? 'temperature'
-                                                          : (metric as 'cpu' | 'memory' | 'disk')
-                                                      }
-                                                      min={sliderMin}
-                                                      max={sliderMax}
-                                                    />
-                                                  </div>
-                                                );
-                                              })()}
-                                            </Show>
-                                            <div class="flex items-center justify-center">
-                                              <input
-                                                type="number"
-                                                min={bounds.min}
-                                                max={bounds.max}
-                                                step={metricStep(metric)}
-                                                value={thresholds()?.[metric] ?? ''}
-                                                placeholder={isDisabled() ? 'Off' : ''}
-                                                title="Set to -1 to disable alerts for this metric"
-                                                ref={(el) => {
-                                                  if (
-                                                    isEditing() &&
-                                                    activeMetricInput()?.resourceId ===
-                                                    resource.id &&
-                                                    activeMetricInput()?.metric === metric
-                                                  ) {
-                                                    queueMicrotask(() => {
-                                                      el.focus();
-                                                      el.select();
-                                                    });
-                                                  }
-                                                }}
-                                                onInput={(e) => {
-                                                  const raw = e.currentTarget.value;
-                                                  if (raw === '') {
-                                                    props.setEditingThresholds({
-                                                      ...props.editingThresholds(),
-                                                      [metric]: undefined,
-                                                    });
-                                                    return;
-                                                  }
-                                                  const val = parseFloat(raw);
-                                                  if (!Number.isNaN(val)) {
-                                                    props.setEditingThresholds({
-                                                      ...props.editingThresholds(),
-                                                      [metric]: val,
-                                                    });
-                                                  }
-                                                }}
-                                                onBlur={() => {
-                                                  if (props.editingId() === resource.id) {
-                                                    props.onSaveEdit(resource.id);
-                                                  }
-                                                  setActiveMetricInput(null);
-                                                }}
-                                                class={`w-16 px-2 py-0.5 text-sm text-center border rounded ${isDisabled()
-                                                  ? 'bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-600 border-gray-300 dark:border-gray-600'
-                                                  : 'bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 border-gray-300 dark:border-gray-600'
-                                                  }`}
-                                              />
-                                            </div>
-                                          </div>
-                                        </Show>
+                                        <div class="flex items-center justify-center">
+                                          <input
+                                            type="number"
+                                            min="-1"
+                                            max={
+                                              metric.includes('disk') ||
+                                                metric.includes('memory') ||
+                                                metric.includes('cpu') ||
+                                                metric === 'usage'
+                                                ? 100
+                                                : 10000
+                                            }
+                                            step={metricStep(metric)}
+                                            value={thresholds()?.[metric] ?? ''}
+                                            placeholder={isDisabled() ? 'Off' : ''}
+                                            title="Set to -1 to disable alerts for this metric"
+                                            ref={(el) => {
+                                              if (
+                                                isEditing() &&
+                                                activeMetricInput()?.resourceId === resource.id &&
+                                                activeMetricInput()?.metric === metric
+                                              ) {
+                                                queueMicrotask(() => {
+                                                  el.focus();
+                                                  el.select();
+                                                });
+                                              }
+                                            }}
+                                            onInput={(e) => {
+                                              const raw = e.currentTarget.value;
+                                              if (raw === '') {
+                                                props.setEditingThresholds({
+                                                  ...props.editingThresholds(),
+                                                  [metric]: undefined,
+                                                });
+                                                return;
+                                              }
+                                              const val = parseFloat(raw);
+                                              if (!Number.isNaN(val)) {
+                                                props.setEditingThresholds({
+                                                  ...props.editingThresholds(),
+                                                  [metric]: val,
+                                                });
+                                              }
+                                            }}
+                                            onBlur={() => {
+                                              if (props.editingId() === resource.id) {
+                                                props.onSaveEdit(resource.id);
+                                              }
+                                              setActiveMetricInput(null);
+                                            }}
+                                            class={`w-16 px-2 py-0.5 text-sm text-center border rounded ${isDisabled()
+                                              ? 'bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-600 border-gray-300 dark:border-gray-600'
+                                              : 'bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 border-gray-300 dark:border-gray-600'
+                                              }`}
+                                          />
+                                        </div>
                                       </Show>
-                                    </td>
-                                  );
-                                }}
-                              </For>
+                                    </Show>
+                                  </td>
+                                );
+                              }}
+                            </For>
 
-                              {/* Offline Alerts column - Connectivity/powered-off alerts */}
-                              <Show when={props.showOfflineAlertsColumn}>
-                                <td class="p-1 px-2 text-center align-middle">
+                            {/* Offline Alerts column - Connectivity/powered-off alerts */}
+                            <Show when={props.showOfflineAlertsColumn}>
+                              <td class="p-1 px-2 text-center align-middle">
+                                <Show when={props.onToggleNodeConnectivity}>
                                   {(() => {
-                                    const disabledGlobally = props.globalDisableFlag?.() ?? false;
-                                    const supportsTriState =
-                                      typeof props.onSetOfflineState === 'function' &&
-                                      (resource.type === 'guest' ||
-                                        resource.type === 'dockerContainer');
-
-                                    if (supportsTriState) {
-                                      const defaultDisabled =
-                                        props.globalDisableOfflineFlag?.() ?? false;
-                                      const defaultSeverity =
-                                        props.globalOfflineSeverity ?? 'warning';
-
-                                      let state: OfflineState;
-                                      if (resource.disableConnectivity) {
-                                        state = 'off';
-                                      } else if (resource.poweredOffSeverity) {
-                                        state = resource.poweredOffSeverity;
-                                      } else if (defaultDisabled) {
-                                        state = 'off';
-                                      } else {
-                                        state =
-                                          defaultSeverity === 'critical' ? 'critical' : 'warning';
-                                      }
-
-                                      return renderOfflineStateButton(
-                                        state,
-                                        disabledGlobally,
-                                        () => {
-                                          if (disabledGlobally) return;
-                                          const next = nextOfflineState(state);
-                                          props.onSetOfflineState?.(resource.id, next);
-                                        },
-                                      );
-                                    }
-
-                                    if (!props.onToggleNodeConnectivity) {
-                                      return <span class="text-sm text-gray-400">-</span>;
-                                    }
-
-                                    const globalOfflineDisabled =
+                                    const defaultOfflineDisabled =
                                       props.globalDisableOfflineFlag?.() ?? false;
-                                    return renderToggleBadge({
-                                      isEnabled:
-                                        !globalOfflineDisabled && !resource.disableConnectivity,
-                                      disabled: disabledGlobally,
-                                      onToggle: () => {
-                                        if (disabledGlobally) return;
-                                        props.onToggleNodeConnectivity?.(resource.id);
-                                      },
-                                      titleEnabled:
-                                        'Offline alerts enabled. Click to disable for this resource.',
-                                      titleDisabled:
-                                        'Offline alerts disabled. Click to enable for this resource.',
-                                      titleWhenDisabled: 'Offline alerts controlled globally',
-                                    });
+                                    const isEnabled = !(
+                                      resource.disableConnectivity || defaultOfflineDisabled
+                                    );
+                                    const disabledGlobally = props.globalDisableFlag?.() ?? false;
+                                    return (
+                                      <StatusBadge
+                                        isEnabled={isEnabled}
+                                        disabled={disabledGlobally}
+                                        onToggle={() => props.onToggleNodeConnectivity?.(resource.id)}
+                                        titleEnabled="Offline alerts enabled. Click to disable for this resource."
+                                        titleDisabled="Offline alerts disabled. Click to enable for this resource."
+                                        titleWhenDisabled="Offline alerts controlled globally"
+                                      />
+                                    );
                                   })()}
-                                </td>
-                              </Show>
+                                </Show>
+                              </td>
+                            </Show>
 
-                              {/* Actions column */}
-                              <td class="p-1 px-2">
-                                <div class="flex items-center justify-center gap-1">
+                            {/* Actions column */}
+                            <td class="p-1 px-2">
+                              <div class="flex items-center justify-center gap-1">
+                                <Show when={typeof resource.toggleEnabled === 'function'}>
+                                  <StatusBadge
+                                    size="sm"
+                                    isEnabled={resource.isEnabled ?? true}
+                                    onToggle={resource.toggleEnabled}
+                                    titleEnabled={resource.toggleTitleEnabled}
+                                    titleDisabled={resource.toggleTitleDisabled}
+                                  />
+                                </Show>
+                                <Show
+                                  when={
+                                    resource.editable !== false && typeof props.onEdit === 'function'
+                                  }
+                                  fallback={
+                                    <span class="text-xs text-gray-400 dark:text-gray-600">—</span>
+                                  }
+                                >
                                   <Show
                                     when={!isEditing()}
                                     fallback={
@@ -1256,7 +1899,7 @@ export function ResourceTable(props: ResourceTableProps) {
                                       </button>
                                     }
                                   >
-                                    <Show when={resource.type !== 'dockerHost'}>
+                                    <div class="flex items-center gap-1">
                                       <button
                                         type="button"
                                         onClick={() =>
@@ -1284,498 +1927,68 @@ export function ResourceTable(props: ResourceTableProps) {
                                           />
                                         </svg>
                                       </button>
-                                    </Show>
-                                    <Show
-                                      when={
-                                        resource.hasOverride ||
-                                        ((resource.type === 'node' ||
-                                          resource.type === 'dockerHost') &&
-                                          resource.disableConnectivity)
-                                      }
-                                    >
-                                      <button
-                                        type="button"
-                                        onClick={() => props.onRemoveOverride(resource.id)}
-                                        class="p-1 text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
-                                        title="Remove override"
+                                      <Show
+                                        when={
+                                          resource.hasOverride ||
+                                          (resource.type === 'node' && resource.disableConnectivity)
+                                        }
                                       >
-                                        <svg
-                                          class="w-4 h-4"
-                                          fill="none"
-                                          stroke="currentColor"
-                                          viewBox="0 0 24 24"
+                                        <button
+                                          type="button"
+                                          onClick={() => props.onRemoveOverride(resource.id)}
+                                          class="p-1 text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
+                                          title="Remove override"
                                         >
-                                          <path
-                                            stroke-linecap="round"
-                                            stroke-linejoin="round"
-                                            stroke-width="2"
-                                            d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-                                          />
-                                        </svg>
-                                      </button>
-                                    </Show>
+                                          <svg
+                                            class="w-4 h-4"
+                                            fill="none"
+                                            stroke="currentColor"
+                                            viewBox="0 0 24 24"
+                                          >
+                                            <path
+                                              stroke-linecap="round"
+                                              stroke-linejoin="round"
+                                              stroke-width="2"
+                                              d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
+                                            />
+                                          </svg>
+                                        </button>
+                                      </Show>
+                                    </div>
                                   </Show>
-                                </div>
-                              </td>
-                            </tr>
-                          );
-                        }}
-                      </For>
-                    </>
-                  );
-                }}
-              </For>
-            </Show>
-            <Show when={!props.groupedResources && props.resources}>
-              <Show
-                when={props.resources && props.resources.length === 0}
-                fallback={
-                  <For each={props.resources}>
-                    {(resource) => {
-                      const isEditing = () => props.editingId() === resource.id;
-                      const thresholds = (): Record<string, number | undefined> => {
-                        if (isEditing()) {
-                          return props.editingThresholds();
-                        }
-                        return resource.thresholds ?? {};
-                      };
-                      const displayValue = (metric: string): number => {
-                        const parseNumeric = (value: unknown): number | undefined => {
-                          if (value === undefined || value === null) return undefined;
-                          if (typeof value === 'number') return value;
-                          const parsed = Number(value);
-                          return Number.isFinite(parsed) ? parsed : undefined;
-                        };
-
-                        const extract = (source: Record<string, unknown> | undefined) =>
-                          parseNumeric(source?.[metric]);
-
-                        const defaults = resource.defaults as Record<string, unknown> | undefined;
-
-                        if (isEditing()) {
-                          const edited = extract(thresholds() as Record<string, unknown>);
-                          if (edited !== undefined) {
-                            return edited;
-                          }
-                          const fallback = extract(defaults);
-                          return fallback !== undefined ? fallback : 0;
-                        }
-
-                        const liveValue = extract(
-                          resource.thresholds as Record<string, unknown> | undefined,
-                        );
-                        if (liveValue !== undefined) {
-                          return liveValue;
-                        }
-
-                        const fallback = extract(defaults);
-                        return fallback !== undefined ? fallback : 0;
-                      };
-                      const isOverridden = (metric: string) => {
-                        return (
-                          resource.thresholds?.[metric] !== undefined &&
-                          resource.thresholds?.[metric] !== null
-                        );
-                      };
-
-                      return (
-                        <tr
-                          class={`hover:bg-gray-50 dark:hover:bg-gray-900/50 transition-colors ${resource.disabled || props.globalDisableFlag?.() ? 'opacity-40' : ''}`}
-                        >
-                          {/* Alert toggle column */}
-                          <td class="p-1 px-2 text-center align-middle">
-                            <Show when={props.onToggleDisabled}>
-                              {(() => {
-                                const globallyDisabled = props.globalDisableFlag?.() ?? false;
-                                const isChecked = !globallyDisabled && !resource.disabled;
-                                return (
-                                  <div class="flex items-center justify-center">
-                                    <TogglePrimitive
-                                      size="sm"
-                                      checked={isChecked}
-                                      disabled={globallyDisabled}
-                                      onToggle={() =>
-                                        !globallyDisabled && props.onToggleDisabled?.(resource.id)
-                                      }
-                                      class="my-[1px]"
-                                      title={
-                                        globallyDisabled
-                                          ? 'Alerts disabled globally'
-                                          : resource.disabled
-                                            ? 'Click to enable alerts'
-                                            : 'Click to disable alerts'
-                                      }
-                                      ariaLabel={
-                                        isChecked
-                                          ? 'Alerts enabled for this resource'
-                                          : 'Alerts disabled for this resource'
-                                      }
-                                    />
-                                  </div>
-                                );
-                              })()}
-                            </Show>
-                          </td>
-                          <td class="p-1 px-2">
-                            <Show
-                              when={resource.type === 'node'}
-                              fallback={
-                                <div class="flex items-center gap-2 min-w-0">
-                                  <span
-                                    class={`text-sm font-medium truncate flex-nowrap ${resource.disabled ? 'text-gray-500 dark:text-gray-500' : 'text-gray-900 dark:text-gray-100'}`}
-                                  >
-                                    {resource.name}
-                                  </span>
-                                  <Show when={resource.hasOverride || resource.disableConnectivity}>
-                                    <span class="text-xs px-1.5 py-0.5 bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 rounded">
-                                      Custom
-                                    </span>
-                                  </Show>
-                                </div>
-                              }
-                            >
-                              <div
-                                class="flex items-center gap-3 min-w-0"
-                                title={resource.status || undefined}
-                              >
-                                <Show
-                                  when={resource.host}
-                                  fallback={
-                                    <span
-                                      class={`text-sm font-medium truncate flex-nowrap ${resource.disabled ? 'text-gray-500 dark:text-gray-500' : 'text-gray-900 dark:text-gray-100'}`}
-                                    >
-                                      {resource.type === 'node'
-                                        ? resource.name
-                                        : resource.displayName || resource.name}
-                                    </span>
-                                  }
-                                >
-                                  {(host) => (
-                                    <a
-                                      href={host() as string}
-                                      target="_blank"
-                                      rel="noopener noreferrer"
-                                      onClick={(e) => e.stopPropagation()}
-                                      class={`text-sm font-medium truncate flex-nowrap transition-colors duration-150 ${resource.disabled
-                                        ? 'text-gray-500 dark:text-gray-500'
-                                        : 'text-gray-900 dark:text-gray-100 hover:text-sky-600 dark:hover:text-sky-400'
-                                        }`}
-                                      title={`Open ${resource.displayName || resource.name} web interface`}
-                                    >
-                                      {resource.type === 'node'
-                                        ? resource.name
-                                        : resource.displayName || resource.name}
-                                    </a>
-                                  )}
-                                </Show>
-                                <Show when={resource.clusterName}>
-                                  <span class="rounded px-2 py-0.5 text-[10px] font-medium whitespace-nowrap bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300">
-                                    {resource.clusterName}
-                                  </span>
-                                </Show>
-                                <Show when={resource.hasOverride || resource.disableConnectivity}>
-                                  <span class="text-xs px-1.5 py-0.5 bg-blue-100 dark:bg-blue-900/50 text-blue-700 dark:text-blue-300 rounded">
-                                    Custom
-                                  </span>
                                 </Show>
                               </div>
-                            </Show>
-                          </td>
-                          {/* Metric columns - dynamically rendered based on resource type */}
-                          <For each={props.columns}>
-                            {(column) => {
-                              const metric = normalizeMetricKey(column);
-
-                              // Check if this metric applies to this resource type
-                              const showMetric = () => {
-                                if (
-                                  resource.type === 'node' &&
-                                  ['diskRead', 'diskWrite', 'networkIn', 'networkOut'].includes(
-                                    metric,
-                                  )
-                                ) {
-                                  return false;
-                                }
-                                if (resource.type === 'pbs') {
-                                  // PBS only has CPU and Memory metrics
-                                  return ['cpu', 'memory'].includes(metric);
-                                }
-                                if (resource.type === 'storage') {
-                                  return metric === 'usage';
-                                }
-                                return true;
-                              };
-
-                              const isDisabled = () => thresholds()?.[metric] === -1;
-
-                              const openMetricEditor = (e: MouseEvent) => {
-                                e.stopPropagation();
-                                if (resource.editable === false) {
-                                  return;
-                                }
-                                setActiveMetricInput({ resourceId: resource.id, metric });
-                                props.onEdit(
-                                  resource.id,
-                                  resource.thresholds ? { ...resource.thresholds } : {},
-                                  resource.defaults ? { ...resource.defaults } : {},
-                                  typeof resource.note === 'string' ? resource.note : undefined,
-                                );
-                              };
-
-                              return (
-                                <td class="p-1 px-2 text-center align-middle">
-                                  <Show
-                                    when={showMetric()}
-                                    fallback={
-                                      <span class="text-sm text-gray-400 dark:text-gray-500">
-                                        -
-                                      </span>
-                                    }
-                                  >
-                                    <Show
-                                      when={isEditing()}
-                                      fallback={
-                                        <div
-                                          onClick={openMetricEditor}
-                                          class="cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-800 rounded px-1 py-0.5 transition-colors"
-                                          title="Click to edit this metric"
-                                        >
-                                          <MetricValueWithHeat
-                                            resourceId={resource.id}
-                                            metric={metric}
-                                            value={displayValue(metric)}
-                                            isOverridden={isOverridden(metric)}
-                                          />
-                                        </div>
-                                      }
-                                    >
-                                      <div class="flex items-center justify-center">
-                                        <input
-                                          type="number"
-                                          min="-1"
-                                          max={
-                                            metric.includes('disk') ||
-                                              metric.includes('memory') ||
-                                              metric.includes('cpu') ||
-                                              metric === 'usage'
-                                              ? 100
-                                              : 10000
-                                          }
-                                          step={metricStep(metric)}
-                                          value={thresholds()?.[metric] ?? ''}
-                                          placeholder={isDisabled() ? 'Off' : ''}
-                                          title="Set to -1 to disable alerts for this metric"
-                                          ref={(el) => {
-                                            if (
-                                              isEditing() &&
-                                              activeMetricInput()?.resourceId === resource.id &&
-                                              activeMetricInput()?.metric === metric
-                                            ) {
-                                              queueMicrotask(() => {
-                                                el.focus();
-                                                el.select();
-                                              });
-                                            }
-                                          }}
-                                          onInput={(e) => {
-                                            const raw = e.currentTarget.value;
-                                            if (raw === '') {
-                                              props.setEditingThresholds({
-                                                ...props.editingThresholds(),
-                                                [metric]: undefined,
-                                              });
-                                              return;
-                                            }
-                                            const val = parseFloat(raw);
-                                            if (!Number.isNaN(val)) {
-                                              props.setEditingThresholds({
-                                                ...props.editingThresholds(),
-                                                [metric]: val,
-                                              });
-                                            }
-                                          }}
-                                          onBlur={() => {
-                                            if (props.editingId() === resource.id) {
-                                              props.onSaveEdit(resource.id);
-                                            }
-                                            setActiveMetricInput(null);
-                                          }}
-                                          class={`w-16 px-2 py-0.5 text-sm text-center border rounded ${isDisabled()
-                                            ? 'bg-gray-100 dark:bg-gray-800 text-gray-400 dark:text-gray-600 border-gray-300 dark:border-gray-600'
-                                            : 'bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 border-gray-300 dark:border-gray-600'
-                                            }`}
-                                        />
-                                      </div>
-                                    </Show>
-                                  </Show>
-                                </td>
-                              );
-                            }}
-                          </For>
-
-                          {/* Offline Alerts column - Connectivity/powered-off alerts */}
-                          <Show when={props.showOfflineAlertsColumn}>
-                            <td class="p-1 px-2 text-center align-middle">
-                              <Show when={props.onToggleNodeConnectivity}>
-                                {(() => {
-                                  const defaultOfflineDisabled =
-                                    props.globalDisableOfflineFlag?.() ?? false;
-                                  const isEnabled = !(
-                                    resource.disableConnectivity || defaultOfflineDisabled
-                                  );
-                                  const disabledGlobally = props.globalDisableFlag?.() ?? false;
-                                  return (
-                                    <StatusBadge
-                                      isEnabled={isEnabled}
-                                      disabled={disabledGlobally}
-                                      onToggle={() => props.onToggleNodeConnectivity?.(resource.id)}
-                                      titleEnabled="Offline alerts enabled. Click to disable for this resource."
-                                      titleDisabled="Offline alerts disabled. Click to enable for this resource."
-                                      titleWhenDisabled="Offline alerts controlled globally"
-                                    />
-                                  );
-                                })()}
-                              </Show>
                             </td>
-                          </Show>
-
-                          {/* Actions column */}
-                          <td class="p-1 px-2">
-                            <div class="flex items-center justify-center gap-1">
-                              <Show when={typeof resource.toggleEnabled === 'function'}>
-                                <StatusBadge
-                                  size="sm"
-                                  isEnabled={resource.isEnabled ?? true}
-                                  onToggle={resource.toggleEnabled}
-                                  titleEnabled={resource.toggleTitleEnabled}
-                                  titleDisabled={resource.toggleTitleDisabled}
-                                />
-                              </Show>
-                              <Show
-                                when={
-                                  resource.editable !== false && typeof props.onEdit === 'function'
-                                }
-                                fallback={
-                                  <span class="text-xs text-gray-400 dark:text-gray-600">—</span>
-                                }
-                              >
-                                <Show
-                                  when={!isEditing()}
-                                  fallback={
-                                    <button
-                                      type="button"
-                                      onClick={() => {
-                                        props.onCancelEdit();
-                                        setActiveMetricInput(null);
-                                      }}
-                                      class="p-1 text-gray-600 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
-                                      title="Cancel editing"
-                                    >
-                                      <svg
-                                        class="w-4 h-4"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        viewBox="0 0 24 24"
-                                      >
-                                        <path
-                                          stroke-linecap="round"
-                                          stroke-linejoin="round"
-                                          stroke-width="2"
-                                          d="M6 18L18 6M6 6l12 12"
-                                        />
-                                      </svg>
-                                    </button>
-                                  }
-                                >
-                                  <div class="flex items-center gap-1">
-                                    <button
-                                      type="button"
-                                      onClick={() =>
-                                        props.onEdit(
-                                          resource.id,
-                                          resource.thresholds ? { ...resource.thresholds } : {},
-                                          resource.defaults ? { ...resource.defaults } : {},
-                                          typeof resource.note === 'string' ? resource.note : undefined,
-                                        )
-                                      }
-                                      class="p-1 text-blue-600 hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
-                                      title="Edit thresholds"
-                                    >
-                                      <svg
-                                        class="w-4 h-4"
-                                        fill="none"
-                                        stroke="currentColor"
-                                        viewBox="0 0 24 24"
-                                      >
-                                        <path
-                                          stroke-linecap="round"
-                                          stroke-linejoin="round"
-                                          stroke-width="2"
-                                          d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
-                                        />
-                                      </svg>
-                                    </button>
-                                    <Show
-                                      when={
-                                        resource.hasOverride ||
-                                        (resource.type === 'node' && resource.disableConnectivity)
-                                      }
-                                    >
-                                      <button
-                                        type="button"
-                                        onClick={() => props.onRemoveOverride(resource.id)}
-                                        class="p-1 text-red-600 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300"
-                                        title="Remove override"
-                                      >
-                                        <svg
-                                          class="w-4 h-4"
-                                          fill="none"
-                                          stroke="currentColor"
-                                          viewBox="0 0 24 24"
-                                        >
-                                          <path
-                                            stroke-linecap="round"
-                                            stroke-linejoin="round"
-                                            stroke-width="2"
-                                            d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-                                          />
-                                        </svg>
-                                      </button>
-                                    </Show>
-                                  </div>
-                                </Show>
-                              </Show>
-                            </div>
-                          </td>
-                        </tr>
-                      );
-                    }}
-                  </For>
-                }
-              >
+                          </tr>
+                        );
+                      }}
+                    </For>
+                  }
+                >
+                  <tr>
+                    <td
+                      colspan={totalColumnCount()}
+                      class="px-4 py-8 text-center text-sm text-gray-500 dark:text-gray-400"
+                    >
+                      No {props.title.toLowerCase()} found
+                    </td>
+                  </tr>
+                </Show>
+              </Show>
+              <Show when={!hasRows()}>
                 <tr>
                   <td
                     colspan={totalColumnCount()}
-                    class="px-4 py-8 text-center text-sm text-gray-500 dark:text-gray-400"
+                    class="px-4 py-6 text-sm text-center text-gray-500 dark:text-gray-400"
                   >
-                    No {props.title.toLowerCase()} found
+                    {props.emptyMessage || 'No resources available.'}
                   </td>
                 </tr>
               </Show>
-            </Show>
-            <Show when={!hasRows()}>
-              <tr>
-                <td
-                  colspan={totalColumnCount()}
-                  class="px-4 py-6 text-sm text-center text-gray-500 dark:text-gray-400"
-                >
-                  {props.emptyMessage || 'No resources available.'}
-                </td>
-              </tr>
-            </Show>
-          </tbody>
-        </table>
-      </div>
-    </Card>
+            </tbody>
+          </table>
+        </div>
+      </Card>
+    </Show>
   );
 }
diff --git a/frontend-modern/src/components/Backups/UnifiedBackups.tsx b/frontend-modern/src/components/Backups/UnifiedBackups.tsx
index 81aabe2baa..b82807bcbc 100644
--- a/frontend-modern/src/components/Backups/UnifiedBackups.tsx
+++ b/frontend-modern/src/components/Backups/UnifiedBackups.tsx
@@ -1991,105 +1991,10 @@ const UnifiedBackups: Component = () => {
                   </Card>
                 }
               >
-                {/* Mobile Card View - Compact */}
-                <div class="block lg:hidden space-y-3">
-                  <For each={paginatedData()}>
-                    {(group) => (
-                      <div class="space-y-1">
-                        <div class="text-xs font-medium text-gray-600 dark:text-gray-400 px-2 py-1 sticky top-0 bg-gray-50 dark:bg-gray-900 z-10">
-                          {group.label} ({group.items.length})
-                        </div>
-                        <For each={group.items}>
-                          {(item) => (
-                            <Card padding="sm" class="hover:shadow-sm transition-shadow">
-                              {/* Compact header row */}
-                              <div class="flex items-center justify-between gap-2 mb-1">
-                                <div class="flex items-center gap-2 min-w-0 flex-1">
-                                  <span
-                                    class={`inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium shrink-0 ${item.type === 'VM'
-                                      ? 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200'
-                                      : 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200'
-                                      }`}
-                                  >
-                                    {item.type}
-                                  </span>
-                                  <span class="text-xs text-gray-500 shrink-0">{item.vmid}</span>
-                                  <span class="font-medium text-xs truncate">
-                                    {item.name || 'Unnamed'}
-                                  </span>
-                                </div>
-                                <div class="flex items-center gap-2 shrink-0">
-                                  <span
-                                    class={`inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium ${item.backupType === 'snapshot'
-                                      ? 'bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200'
-                                      : item.backupType === 'local'
-                                        ? 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200'
-                                        : 'bg-cyan-100 text-cyan-800 dark:bg-cyan-900 dark:text-cyan-200'
-                                      }`}
-                                  >
-                                    {item.backupType === 'snapshot'
-                                      ? 'SNAP'
-                                      : item.backupType === 'local'
-                                        ? 'PVE'
-                                        : 'PBS'}
-                                  </span>
-                                </div>
-                              </div>
-
-                              {/* Compact info row */}
-                              <div class="flex items-center justify-between gap-2 text-[11px]">
-                                <div class="flex items-center gap-3 text-gray-600 dark:text-gray-400">
-                                  <span>{item.node}</span>
-                                  <span class={getAgeColorClass(item.backupTime)}>
-                                    {formatTime(item.backupTime * 1000)}
-                                  </span>
-                                  <Show when={item.size}>
-                                    <span class={getSizeColor(item.size)}>
-                                      {formatBytes(item.size!)}
-                                    </span>
-                                  </Show>
-                                  <Show when={item.backupType === 'remote' && item.verified}>
-                                    <svg
-                                      class="w-4 h-4 text-green-600 dark:text-green-400 inline"
-                                      fill="none"
-                                      viewBox="0 0 24 24"
-                                      stroke="currentColor"
-                                    >
-                                      <path
-                                        stroke-linecap="round"
-                                        stroke-linejoin="round"
-                                        stroke-width="2"
-                                        d="M5 13l4 4L19 7"
-                                      />
-                                    </svg>
-                                  </Show>
-                                </div>
-                                <Show
-                                  when={
-                                    (item.storage || item.datastore) &&
-                                    item.backupType !== 'snapshot'
-                                  }
-                                >
-                                  <span class="text-gray-500 dark:text-gray-400 text-[10px] truncate max-w-[100px]">
-                                    {item.storage ||
-                                      (item.datastore &&
-                                        (item.namespace && item.namespace !== 'root'
-                                          ? `${item.datastore}/${item.namespace}`
-                                          : item.datastore)) ||
-                                      '-'}
-                                  </span>
-                                </Show>
-                              </div>
-                            </Card>
-                          )}
-                        </For>
-                      </div>
-                    )}
-                  </For>
-                </div>
+                {/* Mobile Card View removed in favor of scrollable table */}
 
                 {/* Desktop Table View */}
-                <table class="backup-table hidden md:table">
+                <table class="backup-table" style={{ "min-width": "1200px" }}>
                   <thead>
                     <tr class="bg-gray-50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-300 border-b border-gray-200 dark:border-gray-600">
                       <th
@@ -2112,14 +2017,14 @@ const UnifiedBackups: Component = () => {
                         Name {sortKey() === 'name' && (sortDirection() === 'asc' ? '▲' : '▼')}
                       </th>
                       <th
-                        class="hidden xl:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                        class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                         onClick={() => handleSort('node')}
                       >
                         Node {sortKey() === 'node' && (sortDirection() === 'asc' ? '▲' : '▼')}
                       </th>
                       <Show when={backupTypeFilter() === 'all' || backupTypeFilter() === 'remote'}>
                         <th
-                          class="hidden 2xl:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                          class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                           onClick={() => handleSort('owner')}
                         >
                           Owner {sortKey() === 'owner' && (sortDirection() === 'asc' ? '▲' : '▼')}
@@ -2133,14 +2038,14 @@ const UnifiedBackups: Component = () => {
                       </th>
                       <Show when={backupTypeFilter() !== 'snapshot'}>
                         <th
-                          class="hidden lg:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                          class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                           onClick={() => handleSort('size')}
                         >
                           Size {sortKey() === 'size' && (sortDirection() === 'asc' ? '▲' : '▼')}
                         </th>
                       </Show>
                       <th
-                        class="hidden lg:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                        class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                         onClick={() => handleSort('backupType')}
                       >
                         Backup{' '}
@@ -2148,7 +2053,7 @@ const UnifiedBackups: Component = () => {
                       </th>
                       <Show when={backupTypeFilter() !== 'snapshot'}>
                         <th
-                          class="hidden xl:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                          class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                           onClick={() => handleSort('storage')}
                         >
                           Location{' '}
@@ -2157,7 +2062,7 @@ const UnifiedBackups: Component = () => {
                       </Show>
                       <Show when={backupTypeFilter() === 'all' || backupTypeFilter() === 'remote'}>
                         <th
-                          class="hidden lg:table-cell px-2 py-1.5 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
+                          class="px-2 py-1.5 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600"
                           onClick={() => handleSort('verified')}
                         >
                           <span title="Verified">✓</span>
@@ -2165,7 +2070,7 @@ const UnifiedBackups: Component = () => {
                         </th>
                       </Show>
                       <th
-                        class="hidden md:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider"
+                        class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider"
                       >
                         Details
                       </th>
@@ -2209,13 +2114,13 @@ const UnifiedBackups: Component = () => {
                                 <td class="p-0.5 px-1.5 text-sm align-middle">
                                   {item.name || '-'}
                                 </td>
-                                <td class="hidden xl:table-cell p-0.5 px-1.5 text-sm align-middle">{item.node}</td>
+                                <td class="p-0.5 px-1.5 text-sm align-middle">{item.node}</td>
                                 <Show
                                   when={
                                     backupTypeFilter() === 'all' || backupTypeFilter() === 'remote'
                                   }
                                 >
-                                  <td class="hidden 2xl:table-cell p-0.5 px-1.5 text-xs align-middle text-gray-500 dark:text-gray-400">
+                                  <td class="p-0.5 px-1.5 text-xs align-middle text-gray-500 dark:text-gray-400">
                                     {item.owner ? item.owner.split('@')[0] : '-'}
                                   </td>
                                 </Show>
@@ -2226,12 +2131,12 @@ const UnifiedBackups: Component = () => {
                                 </td>
                                 <Show when={backupTypeFilter() !== 'snapshot'}>
                                   <td
-                                    class={`hidden lg:table-cell p-0.5 px-1.5 align-middle ${getSizeColor(item.size)}`}
+                                    class={`p-0.5 px-1.5 align-middle ${getSizeColor(item.size)}`}
                                   >
                                     {item.size ? formatBytes(item.size) : '-'}
                                   </td>
                                 </Show>
-                                <td class="hidden lg:table-cell p-0.5 px-1.5 align-middle">
+                                <td class="p-0.5 px-1.5 align-middle">
                                   <div class="flex items-center gap-1">
                                     <span
                                       class={`inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium ${item.backupType === 'snapshot'
@@ -2288,7 +2193,7 @@ const UnifiedBackups: Component = () => {
                                   </div>
                                 </td>
                                 <Show when={backupTypeFilter() !== 'snapshot'}>
-                                  <td class="hidden xl:table-cell p-0.5 px-1.5 text-sm align-middle">
+                                  <td class="p-0.5 px-1.5 text-sm align-middle">
                                     {item.storage ||
                                       (item.datastore &&
                                         (item.namespace && item.namespace !== 'root'
@@ -2302,7 +2207,7 @@ const UnifiedBackups: Component = () => {
                                     backupTypeFilter() === 'all' || backupTypeFilter() === 'remote'
                                   }
                                 >
-                                  <td class="hidden lg:table-cell p-0.5 px-1.5 text-center align-middle">
+                                  <td class="p-0.5 px-1.5 text-center align-middle">
                                     {item.backupType === 'remote' ? (
                                       item.verified ? (
                                         <span title="PBS backup verified">
@@ -2348,7 +2253,7 @@ const UnifiedBackups: Component = () => {
                                   </td>
                                 </Show>
                                 <td
-                                  class="hidden md:table-cell p-0.5 px-1.5 align-middle"
+                                  class="p-0.5 px-1.5 align-middle"
                                   onMouseEnter={(e) => {
                                     const details = [];
 
diff --git a/frontend-modern/src/components/Dashboard/Dashboard.tsx b/frontend-modern/src/components/Dashboard/Dashboard.tsx
index 8826113062..7a16edcf20 100644
--- a/frontend-modern/src/components/Dashboard/Dashboard.tsx
+++ b/frontend-modern/src/components/Dashboard/Dashboard.tsx
@@ -20,6 +20,7 @@ import { getNodeDisplayName } from '@/utils/nodes';
 import { logger } from '@/utils/logger';
 import { usePersistentSignal } from '@/hooks/usePersistentSignal';
 import { useColumnVisibility } from '@/hooks/useColumnVisibility';
+import { useBreakpoint } from '@/hooks/useBreakpoint';
 import { STORAGE_KEYS } from '@/utils/localStorage';
 import { getBackupInfo } from '@/utils/format';
 import { aiChatStore } from '@/stores/aiChat';
@@ -207,6 +208,7 @@ export function Dashboard(props: DashboardProps) {
   const navigate = useNavigate();
   const ws = useWebSocket();
   const { connected, activeAlerts, initialDataReceived, reconnecting, reconnect } = ws;
+  const { isMobile } = useBreakpoint();
   const alertsActivation = useAlertsActivation();
   const alertsEnabled = createMemo(() => alertsActivation.activationState() === 'active');
   const [search, setSearch] = createSignal('');
@@ -1117,7 +1119,7 @@ export function Dashboard(props: DashboardProps) {
         <ComponentErrorBoundary name="Guest Table">
           <Card padding="none" tone="glass" class="mb-4 overflow-hidden">
             <div class="overflow-x-auto">
-              <table class="w-full border-collapse whitespace-nowrap" style={{ "min-width": "900px" }}>
+              <table class="w-full border-collapse whitespace-nowrap" style={{ "min-width": isMobile() ? "100%" : "900px" }}>
                 <thead>
                   <tr class="bg-gray-50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-300 border-b border-gray-200 dark:border-gray-700">
                     <For each={visibleColumns()}>
@@ -1130,10 +1132,14 @@ export function Dashboard(props: DashboardProps) {
                         return (
                           <th
                             class={`py-1 text-[11px] sm:text-xs font-medium uppercase tracking-wider whitespace-nowrap
-                              ${isFirst() ? 'pl-4 pr-2 text-left' : 'px-2 text-center'}
-                              ${isSortable ? 'cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600' : ''}`}
+                                  ${isFirst() ? 'pl-4 pr-2 text-left' : 'px-2 text-center'}
+                                  ${isSortable ? 'cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600' : ''}`}
                             style={{
-                              ...(col.width ? { "min-width": col.width } : {}),
+                              ...((['cpu', 'memory', 'disk'].includes(col.id))
+                                ? (isMobile()
+                                  ? { "min-width": "60px" }
+                                  : { "width": "140px", "min-width": "140px", "max-width": "140px" })
+                                : (col.width && (!isMobile() || col.id !== 'name') ? { "min-width": col.width } : {})),
                               "vertical-align": 'middle'
                             }}
                             onClick={() => isSortable && handleSort(sortKeyForCol!)}
diff --git a/frontend-modern/src/components/Dashboard/GuestRow.tsx b/frontend-modern/src/components/Dashboard/GuestRow.tsx
index 1a52954eb5..9d21ea90d6 100644
--- a/frontend-modern/src/components/Dashboard/GuestRow.tsx
+++ b/frontend-modern/src/components/Dashboard/GuestRow.tsx
@@ -433,6 +433,8 @@ export interface GuestColumnDef {
 export const GUEST_COLUMNS: GuestColumnDef[] = [
   // Essential - always visible (fixed widths ensure no overlap)
   { id: 'name', label: 'Name', priority: 'essential', width: '120px', sortKey: 'name' },
+
+  // Secondary - visible on md+ (Now essential for mobile scroll)
   { id: 'type', label: 'Type', priority: 'essential', width: '40px', sortKey: 'type' },
   { id: 'vmid', label: 'ID', priority: 'essential', width: '45px', sortKey: 'vmid' },
 
@@ -441,21 +443,21 @@ export const GUEST_COLUMNS: GuestColumnDef[] = [
   { id: 'memory', label: 'Mem', priority: 'essential', width: '140px', sortKey: 'memory' },
   { id: 'disk', label: 'Disk', priority: 'essential', width: '140px', sortKey: 'disk' },
 
-  // Secondary - visible on md+ (768px), user toggleable - use icons
-  { id: 'ip', label: 'IP', icon: <svg class="w-3.5 h-3.5 block" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" /></svg>, priority: 'secondary', width: '45px', toggleable: true },
-  { id: 'uptime', label: 'Uptime', icon: <svg class="w-3.5 h-3.5 block" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>, priority: 'secondary', width: '60px', toggleable: true, sortKey: 'uptime' },
-  { id: 'node', label: 'Node', icon: <svg class="w-3.5 h-3.5 block" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" /></svg>, priority: 'secondary', width: '55px', toggleable: true, sortKey: 'node' },
+  // Secondary - visible on md+ (Now essential), user toggleable - use icons
+  { id: 'ip', label: 'IP', icon: <svg class="w-3.5 h-3.5 block" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 12a9 9 0 01-9 9m9-9a9 9 0 00-9-9m9 9H3m9 9a9 9 0 01-9-9m9 9c1.657 0 3-4.03 3-9s-1.343-9-3-9m0 18c-1.657 0-3-4.03-3-9s1.343-9 3-9m-9 9a9 9 0 019-9" /></svg>, priority: 'essential', width: '45px', toggleable: true },
+  { id: 'uptime', label: 'Uptime', icon: <svg class="w-3.5 h-3.5 block" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>, priority: 'essential', width: '60px', toggleable: true, sortKey: 'uptime' },
+  { id: 'node', label: 'Node', icon: <svg class="w-3.5 h-3.5 block" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h14M5 12a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v4a2 2 0 01-2 2M5 12a2 2 0 00-2 2v4a2 2 0 002 2h14a2 2 0 002-2v-4a2 2 0 00-2-2m-2-4h.01M17 16h.01" /></svg>, priority: 'essential', width: '55px', toggleable: true, sortKey: 'node' },
 
-  // Supplementary - visible on lg+ (1024px), user toggleable
-  { id: 'backup', label: 'Backup', icon: <svg class="w-3.5 h-3.5 block" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /></svg>, priority: 'supplementary', width: '50px', toggleable: true },
-  { id: 'tags', label: 'Tags', icon: <svg class="w-3.5 h-3.5 block" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" /></svg>, priority: 'supplementary', width: '60px', toggleable: true },
+  // Supplementary - visible on lg+ (Now essential), user toggleable
+  { id: 'backup', label: 'Backup', icon: <svg class="w-3.5 h-3.5 block" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" /></svg>, priority: 'essential', width: '50px', toggleable: true },
+  { id: 'tags', label: 'Tags', icon: <svg class="w-3.5 h-3.5 block" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" /></svg>, priority: 'essential', width: '60px', toggleable: true },
 
-  // Detailed - visible on xl+ (1280px), user toggleable
-  { id: 'os', label: 'OS', priority: 'detailed', width: '45px', toggleable: true },
-  { id: 'diskRead', label: 'D Read', icon: <svg class="w-3.5 h-3.5 block" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>, priority: 'detailed', width: '55px', toggleable: true, sortKey: 'diskRead' },
-  { id: 'diskWrite', label: 'D Write', icon: <svg class="w-3.5 h-3.5 block" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" /></svg>, priority: 'detailed', width: '55px', toggleable: true, sortKey: 'diskWrite' },
-  { id: 'netIn', label: 'Net In', icon: <svg class="w-3.5 h-3.5 block" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16l-4-4m0 0l4-4m-4 4h18" /></svg>, priority: 'detailed', width: '55px', toggleable: true, sortKey: 'networkIn' },
-  { id: 'netOut', label: 'Net Out', icon: <svg class="w-3.5 h-3.5 block" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" /></svg>, priority: 'detailed', width: '55px', toggleable: true, sortKey: 'networkOut' },
+  // Detailed - visible on xl+ (Now essential), user toggleable
+  { id: 'os', label: 'OS', priority: 'essential', width: '45px', toggleable: true },
+  { id: 'diskRead', label: 'D Read', icon: <svg class="w-3.5 h-3.5 block" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /></svg>, priority: 'essential', width: '55px', toggleable: true, sortKey: 'diskRead' },
+  { id: 'diskWrite', label: 'D Write', icon: <svg class="w-3.5 h-3.5 block" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12" /></svg>, priority: 'essential', width: '55px', toggleable: true, sortKey: 'diskWrite' },
+  { id: 'netIn', label: 'Net In', icon: <svg class="w-3.5 h-3.5 block" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16l-4-4m0 0l4-4m-4 4h18" /></svg>, priority: 'essential', width: '55px', toggleable: true, sortKey: 'networkIn' },
+  { id: 'netOut', label: 'Net Out', icon: <svg class="w-3.5 h-3.5 block" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3" /></svg>, priority: 'essential', width: '55px', toggleable: true, sortKey: 'networkOut' },
 ];
 
 interface GuestRowProps {
@@ -790,6 +792,8 @@ export function GuestRow(props: GuestRowProps) {
     props.onRowClick?.(props.guest);
   };
 
+
+
   return (
     <>
       <tr
@@ -914,16 +918,11 @@ export function GuestRow(props: GuestRowProps) {
 
         {/* CPU */}
         <Show when={isColVisible('cpu')}>
-          <td class="px-2 py-1 align-middle" style={{ width: "140px", "min-width": "140px", "max-width": "140px" }}>
-            <Show when={isMobile()}>
-              <div class="md:hidden h-4 flex items-center justify-center">
-                <MetricText value={cpuPercent()} type="cpu" />
-              </div>
-            </Show>
-            <div class="hidden md:block h-4">
+          <td class="px-2 py-1 align-middle" style={isMobile() ? { "min-width": "60px" } : { width: "140px", "min-width": "140px", "max-width": "140px" }}>
+            <div class="h-4">
               <EnhancedCPUBar
                 usage={cpuPercent()}
-                cores={props.guest.cpus}
+                cores={isMobile() ? undefined : props.guest.cpus}
                 resourceId={metricsKey()}
                 anomaly={cpuAnomaly()}
               />
@@ -933,52 +932,38 @@ export function GuestRow(props: GuestRowProps) {
 
         {/* Memory */}
         <Show when={isColVisible('memory')}>
-          <td class="px-2 py-1 align-middle" style={{ width: "140px", "min-width": "140px", "max-width": "140px" }}>
+          <td class="px-2 py-1 align-middle" style={isMobile() ? { "min-width": "60px" } : { width: "140px", "min-width": "140px", "max-width": "140px" }}>
             <div title={memoryTooltip() ?? undefined}>
-              <Show when={isMobile()}>
-                <div class="md:hidden flex justify-center">
-                  <ResponsiveMetricCell
-                    value={memPercent()}
-                    type="memory"
+              <Show
+                when={viewMode() === 'sparklines'}
+                fallback={
+                  <StackedMemoryBar
+                    used={props.guest.memory?.used || 0}
+                    total={props.guest.memory?.total || 0}
+                    balloon={props.guest.memory?.balloon || 0}
+                    swapUsed={props.guest.memory?.swapUsed || 0}
+                    swapTotal={props.guest.memory?.swapTotal || 0}
                     resourceId={metricsKey()}
-                    sublabel={memoryUsageLabel()}
-                    isRunning={isRunning()}
-                    showMobile={true}
+                    anomaly={memoryAnomaly()}
                   />
-                </div>
+                }
+              >
+                <ResponsiveMetricCell
+                  value={memPercent()}
+                  type="memory"
+                  resourceId={metricsKey()}
+                  sublabel={memoryUsageLabel()}
+                  isRunning={isRunning()}
+                  showMobile={false}
+                />
               </Show>
-              <div class="hidden md:block">
-                <Show
-                  when={viewMode() === 'sparklines'}
-                  fallback={
-                    <StackedMemoryBar
-                      used={props.guest.memory?.used || 0}
-                      total={props.guest.memory?.total || 0}
-                      balloon={props.guest.memory?.balloon || 0}
-                      swapUsed={props.guest.memory?.swapUsed || 0}
-                      swapTotal={props.guest.memory?.swapTotal || 0}
-                      resourceId={metricsKey()}
-                      anomaly={memoryAnomaly()}
-                    />
-                  }
-                >
-                  <ResponsiveMetricCell
-                    value={memPercent()}
-                    type="memory"
-                    resourceId={metricsKey()}
-                    sublabel={memoryUsageLabel()}
-                    isRunning={isRunning()}
-                    showMobile={false}
-                  />
-                </Show>
-              </div>
             </div>
           </td>
         </Show>
 
         {/* Disk */}
         <Show when={isColVisible('disk')}>
-          <td class="px-2 py-1 align-middle" style={{ width: "140px", "min-width": "140px", "max-width": "140px" }}>
+          <td class="px-2 py-1 align-middle" style={isMobile() ? { "min-width": "60px" } : { width: "140px", "min-width": "140px", "max-width": "140px" }}>
             <Show
               when={hasDiskUsage()}
               fallback={
@@ -989,31 +974,24 @@ export function GuestRow(props: GuestRowProps) {
                 </div>
               }
             >
-              <Show when={isMobile()}>
-                <div class="md:hidden flex justify-center text-xs text-gray-600 dark:text-gray-400">
-                  {formatPercent(diskPercent())}
-                </div>
-              </Show>
-              <div class={isMobile() ? 'hidden md:block' : ''}>
-                <Show
-                  when={viewMode() === 'sparklines'}
-                  fallback={
-                    <StackedDiskBar
-                      disks={props.guest.disks}
-                      aggregateDisk={props.guest.disk}
-                      anomaly={diskAnomaly()}
-                    />
-                  }
-                >
-                  <ResponsiveMetricCell
-                    value={diskPercent()}
-                    type="disk"
-                    resourceId={metricsKey()}
-                    isRunning={isRunning()}
-                    showMobile={false}
+              <Show
+                when={viewMode() === 'sparklines'}
+                fallback={
+                  <StackedDiskBar
+                    disks={props.guest.disks}
+                    aggregateDisk={props.guest.disk}
+                    anomaly={diskAnomaly()}
                   />
-                </Show>
-              </div>
+                }
+              >
+                <ResponsiveMetricCell
+                  value={diskPercent()}
+                  type="disk"
+                  resourceId={metricsKey()}
+                  isRunning={isRunning()}
+                  showMobile={false}
+                />
+              </Show>
             </Show>
           </td>
         </Show>
diff --git a/frontend-modern/src/components/Docker/DockerHostSummaryTable.tsx b/frontend-modern/src/components/Docker/DockerHostSummaryTable.tsx
index cfe1dbcaed..85e398b24e 100644
--- a/frontend-modern/src/components/Docker/DockerHostSummaryTable.tsx
+++ b/frontend-modern/src/components/Docker/DockerHostSummaryTable.tsx
@@ -206,7 +206,7 @@ export const DockerHostSummaryTable: Component<DockerHostSummaryTableProps> = (p
   return (
     <>
       <Card padding="none" tone="glass" class={`mb-4 ${urlEdit.isEditing() ? 'overflow-visible' : 'overflow-hidden'}`}>
-        <ScrollableTable persistKey="docker-host-summary">
+        <ScrollableTable persistKey="docker-host-summary" minWidth={isMobile() ? '100%' : '800px'}>
           <table class="w-full border-collapse whitespace-nowrap">
             <thead>
               <tr class="bg-gray-50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-300 border-b border-gray-200 dark:border-gray-700">
@@ -225,18 +225,21 @@ export const DockerHostSummaryTable: Component<DockerHostSummaryTableProps> = (p
                 </th>
                 <th
                   class="px-2 py-1 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
+                  style={isMobile() ? { "min-width": "60px" } : { width: "140px", "min-width": "140px", "max-width": "140px" }}
                   onClick={() => handleSort('cpu')}
                 >
                   CPU {renderSortIndicator('cpu')}
                 </th>
                 <th
                   class="px-2 py-1 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
+                  style={isMobile() ? { "min-width": "60px" } : { width: "140px", "min-width": "140px", "max-width": "140px" }}
                   onClick={() => handleSort('memory')}
                 >
                   Memory {renderSortIndicator('memory')}
                 </th>
                 <th
                   class="px-2 py-1 text-center text-[11px] sm:text-xs font-medium uppercase tracking-wider cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 whitespace-nowrap"
+                  style={isMobile() ? { "min-width": "60px" } : { width: "140px", "min-width": "140px", "max-width": "140px" }}
                   onClick={() => handleSort('disk')}
                 >
                   Disk {renderSortIndicator('disk')}
@@ -383,40 +386,39 @@ export const DockerHostSummaryTable: Component<DockerHostSummaryTableProps> = (p
                           {renderDockerStatusBadge(summary.host.status)}
                         </div>
                       </td>
-                      <td class="px-2 py-1 align-middle" style={{ "min-width": "140px" }}>
-                        <Show when={isMobile()}>
-                          <div class="md:hidden flex justify-center">
-                            <MetricText value={summary.cpuPercent} type="cpu" />
-                          </div>
-                        </Show>
-                        <div class="hidden md:block w-full">
+                      <td class="px-2 py-1 align-middle" style={isMobile() ? { "min-width": "60px" } : { width: "140px", "min-width": "140px", "max-width": "140px" }}>
+                        <div class="h-4 w-full">
                           <EnhancedCPUBar
                             usage={summary.cpuPercent}
                             loadAverage={summary.host.loadAverage?.[0]}
-                            cores={summary.host.cpus}
+                            cores={isMobile() ? undefined : summary.host.cpus}
                             resourceId={metricsKey}
                           />
                         </div>
                       </td>
-                      <td class="px-2 py-1 align-middle" style={{ "min-width": "140px" }}>
-                        <ResponsiveMetricCell
-                          value={summary.memoryPercent}
-                          type="memory"
-                          sublabel={summary.memoryLabel}
-                          resourceId={metricsKey}
-                          isRunning={online}
-                          showMobile={isMobile()}
-                        />
+                      <td class="px-2 py-1 align-middle" style={isMobile() ? { "min-width": "60px" } : { width: "140px", "min-width": "140px", "max-width": "140px" }}>
+                        <div class="h-4">
+                          <ResponsiveMetricCell
+                            value={summary.memoryPercent}
+                            type="memory"
+                            sublabel={summary.memoryLabel}
+                            resourceId={metricsKey}
+                            isRunning={online}
+                            showMobile={false}
+                          />
+                        </div>
                       </td>
-                      <td class="px-2 py-1 align-middle" style={{ "min-width": "140px" }}>
-                        <ResponsiveMetricCell
-                          value={summary.diskPercent}
-                          type="disk"
-                          sublabel={summary.diskLabel}
-                          resourceId={metricsKey}
-                          isRunning={!!summary.diskLabel}
-                          showMobile={isMobile()}
-                        />
+                      <td class="px-2 py-1 align-middle" style={isMobile() ? { "min-width": "60px" } : { width: "140px", "min-width": "140px", "max-width": "140px" }}>
+                        <div class="h-4">
+                          <ResponsiveMetricCell
+                            value={summary.diskPercent}
+                            type="disk"
+                            sublabel={summary.diskLabel}
+                            resourceId={metricsKey}
+                            isRunning={!!summary.diskLabel}
+                            showMobile={false}
+                          />
+                        </div>
                       </td>
                       <td class="px-2 py-1 align-middle">
                         <div class="flex justify-center items-center h-full whitespace-nowrap w-full">
diff --git a/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx b/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
index d437a8b2c6..e23c7a3749 100644
--- a/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
+++ b/frontend-modern/src/components/Docker/DockerUnifiedTable.tsx
@@ -1322,7 +1322,7 @@ const DockerContainerRow: Component<{
               type="cpu"
               resourceId={metricsKey}
               isRunning={isRunning() && (container.cpuPercent ?? 0) > 0}
-              showMobile={props.isMobile()}
+              showMobile={false}
               class="w-full"
             />
           </div>
@@ -1334,20 +1334,7 @@ const DockerContainerRow: Component<{
 
         return (
           <div class="px-2 py-0.5 flex items-center overflow-hidden">
-            <Show when={props.isMobile()}>
-              <div class="md:hidden w-full">
-                <ResponsiveMetricCell
-                  value={memPercent()}
-                  type="memory"
-                  sublabel={memUsageLabel()}
-                  resourceId={metricsKey}
-                  isRunning={isRunning() && (container.memoryUsageBytes ?? 0) > 0}
-                  showMobile={true}
-                  class="w-full"
-                />
-              </div>
-            </Show>
-            <div class="hidden md:block w-full">
+            <div class="w-full">
               <StackedMemoryBar
                 used={container.memoryUsageBytes || 0}
                 total={memoryTotal()}
@@ -1370,7 +1357,7 @@ const DockerContainerRow: Component<{
                   resourceId={metricsKey}
                   sublabel={diskSublabel() ?? diskUsageLabel()}
                   isRunning={true}
-                  showMobile={props.isMobile()}
+                  showMobile={false}
                   class="w-full"
                 />
               </Show>
@@ -1415,7 +1402,9 @@ const DockerContainerRow: Component<{
             <td
               class={`py-0.5 align-middle whitespace-nowrap ${column.id === 'resource' ? 'max-w-[300px]' : ''}`}
               style={{
-                "min-width": column.id === 'cpu' || column.id === 'memory' ? '140px' : undefined,
+                "min-width": (column.id === 'cpu' || column.id === 'memory') ? (props.isMobile() ? '60px' : '140px') : undefined,
+                "width": (column.id === 'cpu' || column.id === 'memory') && !props.isMobile() ? '140px' : undefined,
+                "max-width": (column.id === 'cpu' || column.id === 'memory') && !props.isMobile() ? '140px' : undefined
               }}
             >
               {renderCell(column)}
@@ -2245,7 +2234,9 @@ const DockerServiceRow: Component<{
             <td
               class={`py-0.5 align-middle whitespace-nowrap ${column.id === 'resource' ? 'max-w-[300px]' : ''}`}
               style={{
-                "min-width": column.id === 'cpu' || column.id === 'memory' ? '140px' : undefined,
+                "min-width": (column.id === 'cpu' || column.id === 'memory') ? (props.isMobile() ? '60px' : '140px') : undefined,
+                "width": (column.id === 'cpu' || column.id === 'memory') && !props.isMobile() ? '140px' : undefined,
+                "max-width": (column.id === 'cpu' || column.id === 'memory') && !props.isMobile() ? '140px' : undefined
               }}
             >
               {renderCell(column)}
@@ -2790,7 +2781,7 @@ const DockerUnifiedTable: Component<DockerUnifiedTableProps> = (props) => {
       >
         <Card padding="none" tone="glass" class="overflow-hidden">
           <div class="overflow-x-auto">
-            <table class="w-full border-collapse whitespace-nowrap">
+            <table class="w-full border-collapse whitespace-nowrap" style={{ "min-width": isMobile() ? "100%" : "800px" }}>
               <thead>
                 <tr class="border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-300 text-[11px] sm:text-xs font-medium uppercase tracking-wider sticky top-0 z-20">
                   <For each={DOCKER_COLUMNS}>
@@ -2801,7 +2792,7 @@ const DockerUnifiedTable: Component<DockerUnifiedTableProps> = (props) => {
                       return (
                         <th
                           class={`${isResource ? 'pl-4 sm:pl-5 lg:pl-6 pr-2' : 'px-2'} py-1 cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-600 text-left font-medium whitespace-nowrap`}
-                          style={{ "min-width": col.id === 'cpu' || col.id === 'memory' ? '140px' : undefined }}
+                          style={{ "min-width": (col.id === 'cpu' || col.id === 'memory' || col.id === 'disk') ? (isMobile() ? '60px' : '140px') : undefined, "width": (col.id === 'cpu' || col.id === 'memory' || col.id === 'disk') && !isMobile() ? '140px' : undefined, "max-width": (col.id === 'cpu' || col.id === 'memory' || col.id === 'disk') && !isMobile() ? '140px' : undefined }}
                           onClick={() => colSortKey && handleSort(colSortKey)}
                           onKeyDown={(e) => e.key === 'Enter' && colSortKey && handleSort(colSortKey)}
                           tabIndex={0}
diff --git a/frontend-modern/src/components/Storage/Storage.tsx b/frontend-modern/src/components/Storage/Storage.tsx
index b77ee76f09..dd175ea7fe 100644
--- a/frontend-modern/src/components/Storage/Storage.tsx
+++ b/frontend-modern/src/components/Storage/Storage.tsx
@@ -788,30 +788,30 @@ const Storage: Component = () => {
                 <style>{`
                 .overflow-x-auto::-webkit-scrollbar { display: none; }
               `}</style>
-                <table class="w-full">
+                <table class="w-full" style={{ "min-width": "900px" }}>
                   <thead>
                     <tr class="bg-gray-50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-300 border-b border-gray-200 dark:border-gray-600">
                       <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-auto">
                         Storage
                       </th>
-                      <th class="hidden md:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[10%]">
+                      <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[10%]">
                         Type
                       </th>
-                      <th class="hidden lg:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[15%]">
+                      <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[15%]">
                         Content
                       </th>
-                      <th class="hidden sm:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[10%]">
+                      <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[10%]">
                         Status
                       </th>
                       <Show when={viewMode() === 'node'}>
-                        <th class="hidden lg:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[8%]">
+                        <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[8%]">
                           Shared
                         </th>
                       </Show>
                       <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[25%] min-w-[150px]">
                         Usage
                       </th>
-                      <th class="hidden sm:table-cell px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[10%]">
+                      <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[10%]">
                         Free
                       </th>
                       <th class="px-2 py-1.5 text-left text-[11px] sm:text-xs font-medium uppercase tracking-wider w-[10%]">
@@ -1154,12 +1154,12 @@ const Storage: Component = () => {
                                           </Show>
                                         </div>
                                       </td>
-                                      <td class="hidden md:table-cell p-0.5 px-1.5">
+                                      <td class="p-0.5 px-1.5">
                                         <span class="inline-block px-1.5 py-0.5 text-[10px] font-medium rounded bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300">
                                           {storage.type}
                                         </span>
                                       </td>
-                                      <td class="hidden lg:table-cell p-0.5 px-1.5">
+                                      <td class="p-0.5 px-1.5">
                                         <span
                                           class="text-xs text-gray-600 dark:text-gray-400 whitespace-nowrap truncate max-w-[220px]"
                                           title={storage.content || '-'}
@@ -1167,7 +1167,7 @@ const Storage: Component = () => {
                                           {storage.content || '-'}
                                         </span>
                                       </td>
-                                      <td class="hidden sm:table-cell p-0.5 px-1.5 text-xs whitespace-nowrap">
+                                      <td class="p-0.5 px-1.5 text-xs whitespace-nowrap">
                                         <span
                                           class={`${storage.status === 'available'
                                             ? 'text-green-600 dark:text-green-400'
@@ -1178,7 +1178,7 @@ const Storage: Component = () => {
                                         </span>
                                       </td>
                                       <Show when={viewMode() === 'node'}>
-                                        <td class="hidden lg:table-cell p-0.5 px-1.5">
+                                        <td class="p-0.5 px-1.5">
                                           <span class="text-xs text-gray-600 dark:text-gray-400">
                                             {storage.shared ? '✓' : '-'}
                                           </span>
@@ -1193,7 +1193,7 @@ const Storage: Component = () => {
                                           zfsPool={storage.zfsPool}
                                         />
                                       </td>
-                                      <td class="hidden sm:table-cell p-0.5 px-1.5 text-xs whitespace-nowrap">
+                                      <td class="p-0.5 px-1.5 text-xs whitespace-nowrap">
                                         {formatBytes(storage.free || 0, 0)}
                                       </td>
                                       <td class="p-0.5 px-1.5 text-xs whitespace-nowrap">
diff --git a/frontend-modern/src/components/shared/NodeSummaryTable.tsx b/frontend-modern/src/components/shared/NodeSummaryTable.tsx
index ce6a99031d..aa56db9b2a 100644
--- a/frontend-modern/src/components/shared/NodeSummaryTable.tsx
+++ b/frontend-modern/src/components/shared/NodeSummaryTable.tsx
@@ -348,7 +348,7 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
   return (
     <Card padding="none" tone="glass" class="mb-4 overflow-hidden">
       <div class="overflow-x-auto">
-        <table class="w-full border-collapse whitespace-nowrap" style={{ "min-width": "800px" }}>
+        <table class="w-full border-collapse whitespace-nowrap" style={{ "min-width": isMobile() ? "100%" : "800px" }}>
           <thead>
             <tr class="bg-gray-50 dark:bg-gray-700/50 text-gray-600 dark:text-gray-300 border-b border-gray-200 dark:border-gray-700">
               <th
@@ -360,13 +360,13 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
               <th class={thClass} style={{ "min-width": '80px' }} onClick={() => handleSort('uptime')}>
                 Uptime {renderSortIndicator('uptime')}
               </th>
-              <th class={thClass} style={{ width: "200px", "min-width": "200px", "max-width": "200px" }} onClick={() => handleSort('cpu')}>
+              <th class={thClass} style={isMobile() ? { "min-width": "60px" } : { width: "200px", "min-width": "200px", "max-width": "200px" }} onClick={() => handleSort('cpu')}>
                 CPU {renderSortIndicator('cpu')}
               </th>
-              <th class={thClass} style={{ width: "200px", "min-width": "200px", "max-width": "200px" }} onClick={() => handleSort('memory')}>
+              <th class={thClass} style={isMobile() ? { "min-width": "60px" } : { width: "200px", "min-width": "200px", "max-width": "200px" }} onClick={() => handleSort('memory')}>
                 Memory {renderSortIndicator('memory')}
               </th>
-              <th class={thClass} style={{ width: "200px", "min-width": "200px", "max-width": "200px" }} onClick={() => handleSort('disk')}>
+              <th class={thClass} style={isMobile() ? { "min-width": "60px" } : { width: "200px", "min-width": "200px", "max-width": "200px" }} onClick={() => handleSort('disk')}>
                 Disk {renderSortIndicator('disk')}
               </th>
               <Show when={hasAnyTemperatureData()}>
@@ -575,17 +575,12 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
                     </td>
 
                     {/* CPU */}
-                    <td class={tdClass} style={metricColumnStyle}>
-                      <Show when={isMobile()}>
-                        <div class="md:hidden h-4 flex items-center justify-center">
-                          <MetricText value={cpuPercentValue} type="cpu" />
-                        </div>
-                      </Show>
-                      <div class="hidden md:block h-4">
+                    <td class={tdClass} style={isMobile() ? { "min-width": "60px" } : metricColumnStyle}>
+                      <div class="h-4">
                         <EnhancedCPUBar
                           usage={cpuPercentValue}
                           loadAverage={isPVEItem ? node!.loadAverage?.[0] : undefined}
-                          cores={isPVEItem ? node!.cpuInfo?.cores : undefined}
+                          cores={isMobile() ? undefined : (isPVEItem ? node!.cpuInfo?.cores : undefined)}
                           model={isPVEItem ? node!.cpuInfo?.model : undefined}
                           resourceId={metricsKey}
                         />
@@ -593,13 +588,8 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
                     </td>
 
                     {/* Memory */}
-                    <td class={tdClass} style={metricColumnStyle}>
-                      <Show when={isMobile()}>
-                        <div class="md:hidden h-4 flex items-center justify-center">
-                          <MetricText value={memoryPercentValue} type="memory" />
-                        </div>
-                      </Show>
-                      <div class="hidden md:block h-4">
+                    <td class={tdClass} style={isMobile() ? { "min-width": "60px" } : metricColumnStyle}>
+                      <div class="h-4">
                         <Show when={isPVEItem} fallback={
                           <ResponsiveMetricCell
                             value={memoryPercentValue}
@@ -636,13 +626,8 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
                     </td>
 
                     {/* Disk */}
-                    <td class={tdClass} style={metricColumnStyle}>
-                      <Show when={isMobile()}>
-                        <div class="md:hidden h-4 flex items-center justify-center">
-                          <MetricText value={diskPercentValue} type="disk" />
-                        </div>
-                      </Show>
-                      <div class="hidden md:block h-4">
+                    <td class={tdClass} style={isMobile() ? { "min-width": "60px" } : metricColumnStyle}>
+                      <div class="h-4">
                         <Show when={isPVEItem} fallback={
                           <ResponsiveMetricCell
                             value={diskPercentValue}
diff --git a/frontend-modern/src/hooks/useColumnVisibility.ts b/frontend-modern/src/hooks/useColumnVisibility.ts
index a88811d8c3..b42d670104 100644
--- a/frontend-modern/src/hooks/useColumnVisibility.ts
+++ b/frontend-modern/src/hooks/useColumnVisibility.ts
@@ -106,7 +106,7 @@ export function useColumnVisibility(
   const visibleColumns: Accessor<ColumnDef[]> = createMemo(() => {
     return columns.filter(col => {
       // Always show essential columns regardless of breakpoint
-      if (col.priority === 'essential') return true;
+      // However, check for toggle status later (removed early return)
 
       // Check if screen has space for this priority level
       if (!hasSpaceForColumn(col)) return false;
diff --git a/frontend-modern/src/index.css b/frontend-modern/src/index.css
index 2b3b5596e9..13082b7e1e 100644
--- a/frontend-modern/src/index.css
+++ b/frontend-modern/src/index.css
@@ -134,7 +134,7 @@
 
   @media (max-width: 640px) {
     .pulse-shell {
-      padding-inline: clamp(0.75rem, 6vw, 1.25rem);
+      padding-inline: 0.5rem;
     }
   }