From 51e6b4983024adc47e1aa3229b5a265582f90711 Mon Sep 17 00:00:00 2001
From: adam <me@adamksmith.xyz>
Date: Sat, 7 Mar 2026 04:48:34 +0000
Subject: [PATCH] Make table view full-width and add fixed column layout

---
 frontend/src/App.jsx | 35 +++++++++++++++++++++++++----------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 1c08824..a5c5f95 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -261,11 +261,26 @@ function TableView({ enclosure, onSelect, selectedSerial, t }) {
   const populated = enclosure.slots.filter((s) => s.populated);
   return (
     <div style={{ overflowX: "auto" }}>
-      <table style={{ width: "100%", borderCollapse: "separate", borderSpacing: "0 4px", fontSize: 13 }}>
+      <table style={{ width: "100%", tableLayout: "fixed", borderCollapse: "separate", borderSpacing: "0 4px", fontSize: 13 }}>
+        <colgroup>
+          <col style={{ width: "4%" }} />
+          <col style={{ width: "5%" }} />
+          <col style={{ width: "15%" }} />
+          <col style={{ width: "12%" }} />
+          <col style={{ width: "14%" }} />
+          <col style={{ width: "5%" }} />
+          <col style={{ width: "6%" }} />
+          <col style={{ width: "10%" }} />
+          <col style={{ width: "8%" }} />
+          <col style={{ width: "7%" }} />
+          <col style={{ width: "5%" }} />
+          <col style={{ width: "5%" }} />
+          <col style={{ width: "7%" }} />
+        </colgroup>
         <thead>
           <tr style={{ textAlign: "left", color: t.textSecondary, fontSize: 11, textTransform: "uppercase", letterSpacing: 0.8 }}>
             {["Slot", "Device", "Model", "Serial", "WWN", "FW", "Capacity", "Pool", "Vdev", "ZFS State", "Temp", "Hours", "Health"].map((h) => (
-              <th key={h} style={{ padding: "6px 10px", fontWeight: 600, borderBottom: `2px solid ${t.divider}` }}>{h}</th>
+              <th key={h} style={{ padding: "6px 10px", fontWeight: 600, borderBottom: `2px solid ${t.divider}`, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{h}</th>
             ))}
           </tr>
         </thead>
@@ -287,13 +302,13 @@ function TableView({ enclosure, onSelect, selectedSerial, t }) {
                 onMouseEnter={(e) => { if (!isSelected) e.currentTarget.style.background = t.tableRowHover; }}
                 onMouseLeave={(e) => { if (!isSelected) e.currentTarget.style.background = "transparent"; }}
               >
-                <td style={{ padding: "8px 10px", borderLeft: `3px solid ${c.dot}`, borderRadius: "6px 0 0 6px", color: t.text }}>{slot.slot}</td>
-                <td style={{ padding: "8px 10px", fontFamily: "'JetBrains Mono', monospace", fontWeight: 500, fontSize: 12, color: t.mono }}>{slot.device}</td>
-                <td style={{ padding: "8px 10px", maxWidth: 180, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: t.text }}>{d.model}</td>
-                <td style={{ padding: "8px 10px", fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: t.mono }}>{d.serial}</td>
-                <td style={{ padding: "8px 10px", fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: t.textSecondary }}>{d.wwn}</td>
-                <td style={{ padding: "8px 10px", fontSize: 11, color: t.textSecondary }}>{d.firmware}</td>
-                <td style={{ padding: "8px 10px", color: t.text }}>{formatCapacity(d.capacity_bytes)}</td>
+                <td style={{ padding: "8px 10px", borderLeft: `3px solid ${c.dot}`, borderRadius: "6px 0 0 6px", color: t.text, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{slot.slot}</td>
+                <td style={{ padding: "8px 10px", fontFamily: "'JetBrains Mono', monospace", fontWeight: 500, fontSize: 12, color: t.mono, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{slot.device}</td>
+                <td style={{ padding: "8px 10px", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: t.text }}>{d.model}</td>
+                <td style={{ padding: "8px 10px", fontFamily: "'JetBrains Mono', monospace", fontSize: 11, color: t.mono, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{d.serial}</td>
+                <td style={{ padding: "8px 10px", fontFamily: "'JetBrains Mono', monospace", fontSize: 10, color: t.textSecondary, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{d.wwn}</td>
+                <td style={{ padding: "8px 10px", fontSize: 11, color: t.textSecondary, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{d.firmware}</td>
+                <td style={{ padding: "8px 10px", color: t.text, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>{formatCapacity(d.capacity_bytes)}</td>
                 <td style={{ padding: "8px 10px" }}>
                   {d.zfs_pool ? (
                     <span style={{
@@ -595,7 +610,7 @@ export default function App() {
         ::-webkit-scrollbar-thumb { background: ${t.scrollThumb}; border-radius: 3px; }
       `}</style>
 
-      <div style={{ maxWidth: 1100, margin: "0 auto", padding: "32px 20px 60px" }}>
+      <div style={{ maxWidth: view === "table" ? "none" : 1100, margin: "0 auto", padding: "32px 20px 60px", transition: "max-width 0.3s" }}>
         {/* Header */}
         <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 28, flexWrap: "wrap", gap: 12 }}>
           <div>