ui: stop audit-log columns clipping + widen ge-enforce report modal
AuditLogs: the scoped table-layout:fixed + width:100% forced the table to fit the settings pane, so cells ellipsis-clipped (Timestamp/User/IP fell off) rather than scrolling. Drop it so columns size to content and the container scrolls horizontally (global .table-container is overflow-x:auto). Only the free-form Name/ID cell stays bounded (320px + title tooltip) so one long value cannot blow the table width out. EnforcementReports: the per-entry detail modal capped at 640px, too narrow for the 5-column table. Widen to min(1000px, 92vw) and let the Message column wrap instead of forcing horizontal scroll inside the modal.
This commit is contained in:
@@ -280,15 +280,16 @@ onMounted(loadLogs)
|
|||||||
background: var(--primary-dark);
|
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-container > table {
|
||||||
table-layout: fixed;
|
min-width: 100%;
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.table-container > table td {
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
}
|
||||||
.name-cell {
|
.name-cell {
|
||||||
|
max-width: 320px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
|
|||||||
@@ -147,7 +147,12 @@ load()
|
|||||||
.muted { color: var(--text-light); }
|
.muted { color: var(--text-light); }
|
||||||
.fail-count { color: var(--danger); font-weight: 600; }
|
.fail-count { color: var(--danger); font-weight: 600; }
|
||||||
.empty { color: var(--text-light); text-align: center; padding: 1rem; }
|
.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 {
|
.modal-close {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
|
|||||||
Reference in New Issue
Block a user