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>
                 ))}