From 33febcaf1ba1409ab375b105154a11bd64dc30cb Mon Sep 17 00:00:00 2001
From: Juan Denis <jhd3197@gmail.com>
Date: Tue, 3 Nov 2026 13:01:55 -0500
Subject: [PATCH] fix(ui): stack DataTable rows into cards on phones for
 Servers, Fleet proxy, Incidents, Jobs

---
 frontend/src/components/ds/DataTable.jsx      | 11 +++-
 frontend/src/pages/FleetProxy.jsx             |  1 +
 frontend/src/pages/Incidents.jsx              |  1 +
 frontend/src/pages/Jobs.jsx                   |  2 +
 frontend/src/pages/Servers.jsx                |  1 +
 .../src/styles/components/_design-system.scss | 54 +++++++++++++++++++
 6 files changed, 68 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ds/DataTable.jsx b/frontend/src/components/ds/DataTable.jsx
index 6410c284..4acdf844 100644
--- a/frontend/src/components/ds/DataTable.jsx
+++ b/frontend/src/components/ds/DataTable.jsx
@@ -105,6 +105,9 @@ export function DataTable({
     className,
     rowClassName,
     tableClassName,
+    // Below 640px each row becomes a card: first column is the title, the rest
+    // are label/value pairs (CSS-only, see .sk-dtable-wrap--stack).
+    stackOnMobile = false,
 }) {
     const { t } = useTranslation();
     const internal = useTableSort({
@@ -365,10 +368,14 @@ export function DataTable({
                         />
                     </TableCell>
                 )}
-                {visibleColumns.map((column) => (
+                {visibleColumns.map((column, columnIndex) => (
                     <TableCell
                         key={`${key}-${column.key}`}
                         className={column.cellClassName}
+                        data-label={stackOnMobile && typeof column.header === 'string'
+                            ? translateLabel(t, column, 'header') || undefined
+                            : undefined}
+                        data-primary={stackOnMobile && columnIndex === 0 ? '' : undefined}
                     >
                         {column.render
                             ? column.render(row)
@@ -380,7 +387,7 @@ export function DataTable({
     };
 
     return (
-        <div className={cn('sk-dtable-wrap', className)} ref={wrapRef}>
+        <div className={cn('sk-dtable-wrap', stackOnMobile && 'sk-dtable-wrap--stack', className)} ref={wrapRef}>
             <Table className={cn('sk-dtable', tableClassName)}>
                 <TableHeader>
                     <TableRow>
diff --git a/frontend/src/pages/FleetProxy.jsx b/frontend/src/pages/FleetProxy.jsx
index b925db48..e686c448 100644
--- a/frontend/src/pages/FleetProxy.jsx
+++ b/frontend/src/pages/FleetProxy.jsx
@@ -400,6 +400,7 @@ const FleetProxy = () => {
 
                     <div className="fleet-proxy__table">
                         <DataTable
+                            stackOnMobile
                             loading={loading}
                             columns={chrome.columns}
                             data={rows}
diff --git a/frontend/src/pages/Incidents.jsx b/frontend/src/pages/Incidents.jsx
index a54c1695..490d3248 100644
--- a/frontend/src/pages/Incidents.jsx
+++ b/frontend/src/pages/Incidents.jsx
@@ -533,6 +533,7 @@ export default function Incidents() {
                 />
             ) : (
                 <DataTable
+                    stackOnMobile
                     {...chrome.tableProps}
                     columns={chrome.columns}
                     data={shown}
diff --git a/frontend/src/pages/Jobs.jsx b/frontend/src/pages/Jobs.jsx
index b0b97cca..cadf31a5 100644
--- a/frontend/src/pages/Jobs.jsx
+++ b/frontend/src/pages/Jobs.jsx
@@ -482,6 +482,7 @@ export default function Jobs() {
                     />
                 ) : scheduledView ? (
                     <DataTable
+                        stackOnMobile
                         columns={scheduledColumns}
                         data={scheduled}
                         keyField="id"
@@ -531,6 +532,7 @@ export default function Jobs() {
                             />
                         ) : (
                         <DataTable
+                            stackOnMobile
                             columns={chrome.columns}
                             data={jobs}
                             keyField="id"
diff --git a/frontend/src/pages/Servers.jsx b/frontend/src/pages/Servers.jsx
index 93854188..04854488 100644
--- a/frontend/src/pages/Servers.jsx
+++ b/frontend/src/pages/Servers.jsx
@@ -447,6 +447,7 @@ const Servers = () => {
                 />
             ) : (
                 <DataTable
+                    stackOnMobile
                     columns={chrome.columns}
                     data={filteredServers}
                     keyField="id"
diff --git a/frontend/src/styles/components/_design-system.scss b/frontend/src/styles/components/_design-system.scss
index 3268ae57..33d9bbe1 100644
--- a/frontend/src/styles/components/_design-system.scss
+++ b/frontend/src/styles/components/_design-system.scss
@@ -510,6 +510,60 @@ $sk-tones: ('accent', 'green', 'cyan', 'amber', 'red', 'violet');
     border-radius: $radius-card;
 }
 
+// Opt-in (DataTable `stackOnMobile`): phones get one card per row instead of a
+// sideways-scrolling grid. Header is hidden; each cell is "label  value", the
+// first column is the title and an unlabelled cell (actions) sits on the right.
+@media (max-width: $breakpoint-sm - 1px) {
+    .sk-dtable-wrap--stack {
+        overflow-x: visible;
+
+        .sk-dtable,
+        .sk-dtable tbody { display: block; }
+        .sk-dtable thead { display: none; }
+
+        .sk-dtable tbody tr {
+            display: flex;
+            flex-direction: column;
+            gap: $space-1;
+            padding: $space-3 $space-4;
+            border-bottom: 1px solid var(--border-soft);
+        }
+        .sk-dtable tbody tr:last-child { border-bottom: none; }
+
+        .sk-dtable tbody td,
+        .sk-dtable tbody td:first-child,
+        .sk-dtable tbody td:last-child {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: $space-3;
+            height: auto;
+            min-width: 0;
+            padding: 0;
+            border: 0;
+            text-align: right;
+        }
+        .sk-dtable tbody td[data-label]::before {
+            content: attr(data-label);
+            flex-shrink: 0;
+            font-size: $text-xs;
+            color: var(--text-faint);
+        }
+        .sk-dtable tbody td:not([data-label]) { justify-content: flex-end; }
+        .sk-dtable tbody td[data-primary] { justify-content: flex-start; text-align: left; font-size: $text-md; }
+        .sk-dtable tbody td[data-primary]::before { content: none; }
+        .sk-dtable tbody td:empty { display: none; }
+        // A cell that is only a "open" chevron rides the card's top-right corner
+        // instead of costing a row of its own.
+        .sk-dtable tbody tr { position: relative; }
+        .sk-dtable tbody td:has(> svg:only-child) {
+            position: absolute;
+            inset-block-start: $space-3;
+            inset-inline-end: $space-4;
+        }
+    }
+}
+
 // A table that is one section of a titled card/panel runs flush inside it:
 // two frames a pixel apart is the seam this rule removes. A page-specific
 // panel that frames its own header + table opts in with --flush.