diff --git a/frontend/src/views/settings/AuditLogs.vue b/frontend/src/views/settings/AuditLogs.vue index 043a548..d062ba0 100644 --- a/frontend/src/views/settings/AuditLogs.vue +++ b/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; diff --git a/plugins/geenforce/frontend/views/EnforcementReports.vue b/plugins/geenforce/frontend/views/EnforcementReports.vue index e497ca0..c730e84 100644 --- a/plugins/geenforce/frontend/views/EnforcementReports.vue +++ b/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;