From c000ea8bce0ff519d109c463210baa89fdccbf81 Mon Sep 17 00:00:00 2001
From: npeter83 <npeter83+claude@gmail.com>
Date: Wed, 17 Jun 2026 23:24:25 +0200
Subject: [PATCH] feat(ui): content-driven column widths in DataTable

Columns auto-size to their content (table-layout: auto) via a per-column 'nowrap' flag;
headers never wrap. Replaces hand-tuned fixed widths so values like 'N / S / L' no longer
wrap, and callers give a min-width only where a column must not collapse.
---
 frontend/src/components/DataTable.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/DataTable.tsx b/frontend/src/components/DataTable.tsx
index ef1d5a8..1127b01 100644
--- a/frontend/src/components/DataTable.tsx
+++ b/frontend/src/components/DataTable.tsx
@@ -22,6 +22,8 @@ export interface Column<T> {
   sortable?: boolean;
   sortValue?: (row: T) => string | number;
   filter?: ColumnFilter<T>;
+  // Keep the cell on one line so the column auto-sizes to its content (table-layout: auto).
+  nowrap?: boolean;
   // Card fallback (below md): `cardPrimary` renders as the card heading (no label); `hideInCard`
   // omits the column; `cardLabel:false` shows the value without its header label.
   cardPrimary?: boolean;
@@ -325,7 +327,7 @@ export default function DataTable<T>({
                   <th
                     key={col.key}
                     style={col.width ? { width: col.width } : undefined}
-                    className={`relative font-medium px-2 py-2 ${align(col.align)}`}
+                    className={`relative font-medium px-2 py-2 whitespace-nowrap ${align(col.align)}`}
                   >
                     <span className="inline-flex items-center gap-1">
                       <button
@@ -370,7 +372,11 @@ export default function DataTable<T>({
                 }`}
               >
                 {columns.map((col) => (
-                  <td key={col.key} style={col.width ? { width: col.width } : undefined} className={`px-2 py-2 align-middle ${align(col.align)}`}>
+                  <td
+                    key={col.key}
+                    style={col.width ? { width: col.width } : undefined}
+                    className={`px-2 py-2 align-middle ${col.nowrap ? "whitespace-nowrap" : ""} ${align(col.align)}`}
+                  >
                     {col.render(row)}
                   </td>
                 ))}