ui: audit-log column clipping + ge-enforce report modal width

frontend/src/views/settings/AuditLogs.vue

@@ -280,15 +280,16 @@ onMounted(loadLogs)
   background: var(--primary-dark);
 }
 
+/* Size columns to their content and let the container scroll horizontally
+   (global .table-container is overflow-x:auto) instead of fixed widths that
+   ellipsis-clip Timestamp/User/IP off-screen on a narrow main pane. Only the
+   free-form Name/ID cell is bounded, so one long value cannot blow the table
+   width out; its full text stays in the title tooltip. */
 .table-container > table {
-  table-layout: fixed;
-  width: 100%;
-}
-.table-container > table td {
-  overflow: hidden;
-  text-overflow: ellipsis;
+  min-width: 100%;
 }
 .name-cell {
+  max-width: 320px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;

plugins/geenforce/frontend/views/EnforcementReports.vue

@@ -147,7 +147,12 @@ load()
 .muted { color: var(--text-light); }
 .fail-count { color: var(--danger); font-weight: 600; }
 .empty { color: var(--text-light); text-align: center; padding: 1rem; }
-.modal-report { max-width: 640px; }
+/* Wide enough for the 5-column per-entry table (Message is the long one).
+   Caps at 92vw so it still fits a small screen. */
+.modal-report { max-width: min(1000px, 92vw); }
+/* Message wraps instead of forcing horizontal scroll inside the modal; the
+   other cells stay on one line (global .table-container is white-space:nowrap). */
+.modal-report td:last-child { white-space: normal; min-width: 22ch; }
 .modal-close {
   background: transparent;
   border: none;