From c3c7bdf4a412f2fb1e643f4a506263b1bd350a9d Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Tue, 10 Feb 2026 19:24:03 +0000
Subject: [PATCH] fix(ui): wrap NodeSummaryTable and HostsOverview with
 ScrollableTable for mobile (#1196)

NodeSummaryTable and HostsOverview used raw overflow-x-auto divs with
min-width: 800px, causing column overlap on narrow screens. Wrap both
with ScrollableTable and bump min-width to 1000px to match actual
column totals. Also bump DockerHostSummaryTable min-width from 800px
to 920px to match its column widths.
---
 .../src/components/Docker/DockerHostSummaryTable.tsx     | 4 ++--
 frontend-modern/src/components/Hosts/HostsOverview.tsx   | 8 ++++----
 .../src/components/shared/NodeSummaryTable.tsx           | 9 +++++----
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/frontend-modern/src/components/Docker/DockerHostSummaryTable.tsx b/frontend-modern/src/components/Docker/DockerHostSummaryTable.tsx
index 8e95216143..db4bff61ab 100644
--- a/frontend-modern/src/components/Docker/DockerHostSummaryTable.tsx
+++ b/frontend-modern/src/components/Docker/DockerHostSummaryTable.tsx
@@ -132,8 +132,8 @@ export const DockerHostSummaryTable: Component<DockerHostSummaryTableProps> = (p
   return (
     <>
       <Card padding="none" tone="glass" class="mb-4 overflow-hidden">
-        <ScrollableTable persistKey="docker-host-summary" minWidth="800px" mobileMinWidth="800px">
-          <table class="w-full border-collapse whitespace-nowrap" style={{ "table-layout": "fixed" }}>
+        <ScrollableTable persistKey="docker-host-summary" minWidth="920px" mobileMinWidth="920px">
+          <table class="w-full border-collapse whitespace-nowrap" style={{ "table-layout": "fixed", "min-width": "920px" }}>
             <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
diff --git a/frontend-modern/src/components/Hosts/HostsOverview.tsx b/frontend-modern/src/components/Hosts/HostsOverview.tsx
index 4e8ced2d0a..db5e9b5da6 100644
--- a/frontend-modern/src/components/Hosts/HostsOverview.tsx
+++ b/frontend-modern/src/components/Hosts/HostsOverview.tsx
@@ -23,6 +23,7 @@ import { useAlertsActivation } from '@/stores/alertsActivation';
 import { HostMetadataAPI, type HostMetadata } from '@/api/hostMetadata';
 
 import { logger } from '@/utils/logger';
+import { ScrollableTable } from '@/components/shared/ScrollableTable';
 import { buildMetricKey } from '@/utils/metricsKeys';
 import { isKioskMode, subscribeToKioskMode } from '@/utils/url';
 import { HostDrawer } from './HostDrawer';
@@ -985,9 +986,8 @@ export const HostsOverview: Component = () => {
                 }
               >
                 <Card padding="none" tone="glass" class="overflow-hidden">
-                  <div class="overflow-x-auto" style="scrollbar-width: none; -ms-overflow-style: none;">
-                    <style>{`.overflow-x-auto::-webkit-scrollbar { display: none; }`}</style>
-                    <table class="w-full border-collapse whitespace-nowrap" style={{ "table-layout": "fixed", "min-width": "800px" }}>
+                  <ScrollableTable persistKey="hosts-overview" minWidth="1000px" mobileMinWidth="1000px">
+                    <table class="w-full border-collapse whitespace-nowrap" style={{ "table-layout": "fixed", "min-width": "1000px" }}>
                       <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">
                           {/* Essential columns */}
@@ -1071,7 +1071,7 @@ export const HostsOverview: Component = () => {
                         </For>
                       </tbody>
                     </table>
-                  </div>
+                  </ScrollableTable>
                 </Card>
               </Show>
             </>
diff --git a/frontend-modern/src/components/shared/NodeSummaryTable.tsx b/frontend-modern/src/components/shared/NodeSummaryTable.tsx
index 0b76b23523..a5c66c3b58 100644
--- a/frontend-modern/src/components/shared/NodeSummaryTable.tsx
+++ b/frontend-modern/src/components/shared/NodeSummaryTable.tsx
@@ -17,6 +17,7 @@ import { EnhancedCPUBar } from '@/components/Dashboard/EnhancedCPUBar';
 import { TemperatureGauge } from '@/components/shared/TemperatureGauge';
 import { useBreakpoint } from '@/hooks/useBreakpoint';
 import { useMetricsViewMode } from '@/stores/metricsViewMode';
+import { ScrollableTable } from '@/components/shared/ScrollableTable';
 
 // Lazy load NodeDrawer to avoid circular dependencies and reduce bundle size
 const NodeDrawer = lazy(() => import('./NodeDrawer').then(m => ({ default: m.NodeDrawer })));
@@ -371,8 +372,8 @@ 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={{ "table-layout": "fixed", "min-width": "800px" }}>
+      <ScrollableTable persistKey="node-summary" minWidth="1000px" mobileMinWidth="1000px">
+        <table class="w-full border-collapse whitespace-nowrap" style={{ "table-layout": "fixed", "min-width": "1000px" }}>
           <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">
 
@@ -857,7 +858,7 @@ export const NodeSummaryTable: Component<NodeSummaryTableProps> = (props) => {
             </For>
           </tbody>
         </table>
-      </div>
-    </Card >
+      </ScrollableTable>
+    </Card>
   );
 };