2

Refine requests log mobile layout

This commit is contained in:
2026-03-12 20:23:46 +01:00
parent 6b9330529c
commit cec72a90b9

View File

@@ -923,7 +923,7 @@ const queryLogHTML = `<!doctype html>
.controls-panel[open] summary { border-bottom: 1px solid #334155; } .controls-panel[open] summary { border-bottom: 1px solid #334155; }
.controls-body { padding: 1rem; display: grid; gap: 1rem; } .controls-body { padding: 1rem; display: grid; gap: 1rem; }
.controls-help { font-size: .92rem; } .controls-help { font-size: .92rem; }
.filters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .85rem; align-items: end; } .filters-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .85rem; align-items: end; }
.field { display: grid; gap: .35rem; } .field { display: grid; gap: .35rem; }
.field label { font-size: .85rem; color: #cbd5e1; } .field label { font-size: .85rem; color: #cbd5e1; }
.field input, .field select { width: 100%; box-sizing: border-box; padding: .55rem .65rem; border-radius: .55rem; border: 1px solid #334155; background: #0f172a; color: #e2e8f0; } .field input, .field select { width: 100%; box-sizing: border-box; padding: .55rem .65rem; border-radius: .55rem; border: 1px solid #334155; background: #0f172a; color: #e2e8f0; }
@@ -943,7 +943,7 @@ const queryLogHTML = `<!doctype html>
.sort-indicator { color: #64748b; font-size: .82rem; margin-left: .2rem; } .sort-indicator { color: #64748b; font-size: .82rem; margin-left: .2rem; }
.col-time, .col-ip, .col-method, .col-source, .col-status, .col-state, .col-reason, .col-actions { white-space: nowrap; } .col-time, .col-ip, .col-method, .col-source, .col-status, .col-state, .col-reason, .col-actions { white-space: nowrap; }
.col-time { width: 11rem; } .col-time { width: 11rem; }
.col-ip { width: 12rem; } .col-ip { width: 13rem; }
.col-method { width: 5.5rem; } .col-method { width: 5.5rem; }
.col-source { width: 7rem; } .col-source { width: 7rem; }
.col-status { width: 4.75rem; } .col-status { width: 4.75rem; }
@@ -972,7 +972,8 @@ const queryLogHTML = `<!doctype html>
.actions { display: block; } .actions { display: block; }
.actions button { display: block; width: 100%; min-width: 0; } .actions button { display: block; width: 100%; min-width: 0; }
.actions .muted { display: block; text-align: center; } .actions .muted { display: block; text-align: center; }
.ip-cell { display: flex; align-items: center; gap: .45rem; min-width: 0; } .ip-cell { display: flex; align-items: center; gap: .45rem; min-width: 0; max-width: 100%; }
.ip-link { display: block; flex: 1 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bot-chip { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 999px; border: 1px solid #334155; background: #0f172a; color: #e2e8f0; font-size: .72rem; font-weight: 700; cursor: help; flex: 0 0 auto; } .bot-chip { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 999px; border: 1px solid #334155; background: #0f172a; color: #e2e8f0; font-size: .72rem; font-weight: 700; cursor: help; flex: 0 0 auto; }
.bot-chip.verified { border-color: #2563eb; } .bot-chip.verified { border-color: #2563eb; }
.bot-chip.hint { border-style: dashed; } .bot-chip.hint { border-style: dashed; }
@@ -1471,7 +1472,7 @@ const queryLogHTML = `<!doctype html>
return [ return [
'<tr>', '<tr>',
' <td class="col-time">' + escapeHtml(formatDate(item.occurred_at)) + '</td>', ' <td class="col-time">' + escapeHtml(formatDate(item.occurred_at)) + '</td>',
' <td class="col-ip mono"><div class="ip-cell">' + renderBotChip(item.bot) + '<a href="/ips/' + encodeURIComponent(item.client_ip) + '">' + escapeHtml(item.client_ip || '—') + '</a></div></td>', ' <td class="col-ip mono"><div class="ip-cell">' + renderBotChip(item.bot) + '<a class="ip-link" href="/ips/' + encodeURIComponent(item.client_ip) + '" title="' + escapeHtml(item.client_ip || '—') + '">' + escapeHtml(item.client_ip || '—') + '</a></div></td>',
' <td class="col-method"><span class="method ' + escapeHtml(methodClass(item.method)) + '">' + escapeHtml(item.method || 'OTHER') + '</span></td>', ' <td class="col-method"><span class="method ' + escapeHtml(methodClass(item.method)) + '">' + escapeHtml(item.method || 'OTHER') + '</span></td>',
' <td class="col-source">' + escapeHtml(item.source_name || '—') + '</td>', ' <td class="col-source">' + escapeHtml(item.source_name || '—') + '</td>',
' <td class="col-request mono"><span class="request-text" title="' + escapeHtml(requestLabel) + '">' + escapeHtml(requestLabel) + '</span></td>', ' <td class="col-request mono"><span class="request-text" title="' + escapeHtml(requestLabel) + '">' + escapeHtml(requestLabel) + '</span></td>',