diff --git a/frontend/src/components/auditColumns.tsx b/frontend/src/components/auditColumns.tsx
index 57a2dbb..642a9df 100644
--- a/frontend/src/components/auditColumns.tsx
+++ b/frontend/src/components/auditColumns.tsx
@@ -80,9 +80,12 @@ export function auditColumns(
       render: (r) => {
         const change = changeText(r);
         return (
+          // break-words (wrap), NOT truncate: in the auto-layout table a `truncate` (nowrap) cell
+          // sizes to its longest row, so one long summary/change stretched the whole table past the
+          // card (the row rules bled into the page). Wrapping keeps every row inside the container.
           <div className="min-w-0">
-            {r.summary && <div className="truncate">{r.summary}</div>}
-            {change && <div className="text-[11px] text-muted truncate">{change}</div>}
+            {r.summary && <div className="break-words">{r.summary}</div>}
+            {change && <div className="text-[11px] text-muted break-words">{change}</div>}
           </div>
         );
       },