diff --git a/internal/web/handler.go b/internal/web/handler.go
index 7e7a8ea..59c803b 100644
--- a/internal/web/handler.go
+++ b/internal/web/handler.go
@@ -978,9 +978,9 @@ const queryLogHTML = `
.method-pill.post { background: #78350f; color: #fef3c7; }
.method-pill.head { background: #0c4a6e; color: #e0f2fe; }
.method-pill.other { background: #334155; color: #e2e8f0; }
- .status-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 3.5rem; padding: .15rem .45rem; border-radius: 999px; font-size: .8rem; font-weight: 700; background: #1e293b; color: #e2e8f0; }
- .status-pill.client-error { background: #713f12; color: #fde68a; }
- .status-pill.server-error { background: #9a3412; color: #fdba74; }
+ .status-code { display: inline-block; font-size: .84rem; font-weight: 700; color: #e2e8f0; }
+ .status-code.client-error { color: #facc15; }
+ .status-code.server-error { color: #fb923c; }
.state-pill { display: inline-block; padding: .15rem .45rem; border-radius: 999px; font-size: .8rem; background: #1e293b; }
.state-pill.blocked { background: #7f1d1d; }
.state-pill.review { background: #78350f; }
@@ -1593,7 +1593,7 @@ const queryLogHTML = `
function statusFormatter(cell) {
const value = Number(cell.getRow().getData().status || 0);
- return '' + escapeHtml(String(value || 0)) + '';
+ return '' + escapeHtml(String(value || 0)) + '';
}
function stateFormatter(cell) {
@@ -1637,11 +1637,11 @@ const queryLogHTML = `
}],
columns: [
{ title: 'Time', field: 'time', headerSort: true, formatter: timeFormatter, width: 184, minWidth: 164, responsive: 0 },
- { title: 'IP', field: 'ip', headerSort: true, formatter: ipFormatter, width: 220, minWidth: 190, responsive: 0 },
+ { title: 'IP', field: 'ip', headerSort: true, formatter: ipFormatter, width: 320, minWidth: 280, responsive: 0 },
{ title: 'Method', field: 'method', headerSort: true, formatter: methodFormatter, width: 96, minWidth: 88, responsive: 4 },
{ title: 'Source', field: 'source', headerSort: true, formatter: function(cell) { return escapeHtml(cell.getRow().getData().source_name || '—'); }, width: 120, minWidth: 104, responsive: 5 },
{ title: 'Request', field: 'request', headerSort: true, formatter: requestFormatter, minWidth: 220, widthGrow: 4, responsive: 0 },
- { title: 'Status', field: 'status', headerSort: true, formatter: statusFormatter, hozAlign: 'center', width: 92, minWidth: 88, responsive: 2 },
+ { title: 'Status', field: 'status', headerSort: true, formatter: statusFormatter, hozAlign: 'center', width: 76, minWidth: 72, responsive: 2 },
{ title: 'State', field: 'state', headerSort: true, formatter: stateFormatter, width: 112, minWidth: 104, responsive: 6 },
{ title: 'Reason', field: 'reason', headerSort: true, formatter: reasonFormatter, minWidth: 180, widthGrow: 2, responsive: 7 },
{ title: '', field: 'actions', headerSort: false, formatter: actionFormatter, hozAlign: 'center', width: 62, minWidth: 58, responsive: 1 },
diff --git a/internal/web/handler_test.go b/internal/web/handler_test.go
index b6b94bb..2aa6f2f 100644
--- a/internal/web/handler_test.go
+++ b/internal/web/handler_test.go
@@ -199,6 +199,9 @@ func TestHandlerServesOverviewAndManualActions(t *testing.T) {
if !strings.Contains(queryLogBody, `/assets/tabulator/tabulator.min.js`) || !strings.Contains(queryLogBody, `/assets/tabulator/tabulator_midnight.min.css`) {
t.Fatalf("requests log page should load local tabulator assets")
}
+ if !strings.Contains(queryLogBody, `.status-code`) || strings.Contains(queryLogBody, `.status-pill`) {
+ t.Fatalf("requests log page should use the simplified status styling")
+ }
if !strings.Contains(queryLogBody, `.tabulator .tabulator-tableholder .tabulator-table { min-width: 100% !important; width: 100% !important; }`) {
t.Fatalf("requests log page should keep the tabulator body at full width")
}