Compare commits

..
Author SHA1 Message Date
cedricandClaude Opus 5.5 dd8ca74cad Log list: tighter rows, badges no longer set the line height
Rows drop from ~29px to ~24px (normal density, medium font) and from
~18.6px to ~18px in compact; long messages still wrap.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
2026-10-07 18:09:06 +02:00
claude BotandClaude Opus 5.5 2ca89b1c6d Source badge at the start of every log line
Each row now starts with a fixed-width badge naming its source, one color
per source: SYSLOG, DOCKER, KERNEL (dmesg), HOST (/var/log), AUDIT, FILE
and LS. The AUDIT/FILE/LS badges move there from before the app name; those
sources keep their colored edge and tint.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
2026-10-05 13:16:36 +02:00
+9 -11
View File
@@ -392,18 +392,17 @@ body.col-resizing, body.col-resizing * { cursor: col-resize !important; user-sel
display: grid; display: grid;
grid-template-columns: max-content max-content max-content 4.6rem minmax(5rem, 9rem) minmax(4rem, 8rem) var(--codes-w) 1fr; grid-template-columns: max-content max-content max-content 4.6rem minmax(5rem, 9rem) minmax(4rem, 8rem) var(--codes-w) 1fr;
gap: 0 12px; align-items: baseline; gap: 0 12px; align-items: baseline;
padding: 5px 14px 5px 11px; padding: 3px 14px 3px 11px;
border-left: 3px solid transparent; border-left: 3px solid transparent;
border-bottom: 1px solid var(--border); border-bottom: 1px solid var(--border);
font-family: var(--log-font, var(--mono)); font-size: var(--log-size); font-family: var(--log-font, var(--mono)); font-size: var(--log-size); line-height: 1.35;
font-variant-ligatures: none; /* keep -> != etc. as typed */ font-variant-ligatures: none; /* keep -> != etc. as typed */
cursor: pointer; cursor: pointer;
} }
.row:last-child { border-bottom: 0; } .row:last-child { border-bottom: 0; }
/* Settings > Interface > Density: compact fits about 50% more lines on screen */ /* Settings > Interface > Density: compact fits about 50% more lines on screen */
:root[data-density="compact"] .row { padding-top: 1px; padding-bottom: 1px; line-height: 1.25; } :root[data-density="compact"] .row { padding-top: 1px; padding-bottom: 1px; line-height: 1.2; }
:root[data-density="compact"] .row .sev { padding-top: 0; padding-bottom: 0; line-height: 1.3; } :root[data-density="compact"] .row :is(.src-badge, .sev, .codes b) { line-height: 1.15; }
:root[data-density="compact"] .row .codes b { padding-top: 0; padding-bottom: 0; line-height: 1.2; }
.row:hover { background: var(--row-hover); } .row:hover { background: var(--row-hover); }
.row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.row.new { animation: flash 1.2s ease-out; } .row.new { animation: flash 1.2s ease-out; }
@@ -421,7 +420,7 @@ body.col-resizing, body.col-resizing * { cursor: col-resize !important; user-sel
.sev { .sev {
justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis; justify-self: start; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
padding: 1px 6px; border-radius: 5px; padding: 0 6px; border-radius: 5px; line-height: 1.3;
color: var(--sev); background: color-mix(in srgb, var(--sev) 14%, transparent); color: var(--sev); background: color-mix(in srgb, var(--sev) 14%, transparent);
} }
.sev-crit { --sev: var(--tag-error); --sev-text: var(--tag-error-text); } .sev-crit { --sev: var(--tag-error); --sev-text: var(--tag-error-text); }
@@ -448,12 +447,11 @@ body.col-resizing, body.col-resizing * { cursor: col-resize !important; user-sel
.row.src-audit, .row.src-logstream, .row.src-file { border-left-color: var(--src); background: color-mix(in srgb, var(--src) var(--src-tint), transparent); } .row.src-audit, .row.src-logstream, .row.src-file { border-left-color: var(--src); background: color-mix(in srgb, var(--src) var(--src-tint), transparent); }
.row.src-audit:hover, .row.src-logstream:hover, .row.src-file:hover { background: color-mix(in srgb, var(--src) 13%, var(--row-hover)); } .row.src-audit:hover, .row.src-logstream:hover, .row.src-file:hover { background: color-mix(in srgb, var(--src) 13%, var(--row-hover)); }
.src-badge { .src-badge {
justify-self: start; box-sizing: content-box; width: 6ch; padding: 1px 4px; border-radius: 4px; text-align: center; justify-self: start; box-sizing: content-box; width: 6ch; padding: 0 4px; border-radius: 4px; text-align: center;
font-family: var(--log-font, var(--mono)); font-size: 10px; font-weight: 700; letter-spacing: .02em; line-height: 1.35; font-family: var(--log-font, var(--mono)); font-size: 10px; font-weight: 700; letter-spacing: .02em; line-height: 1.3;
color: var(--src); background: color-mix(in srgb, var(--src) 16%, transparent); color: var(--src); background: color-mix(in srgb, var(--src) 16%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--src) 40%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--src) 40%, transparent);
} }
:root[data-density="compact"] .row .src-badge { padding-top: 0; padding-bottom: 0; line-height: 1.3; }
.row .raw { .row .raw {
margin-top: 2px; font-size: .85em; line-height: 1.35; color: var(--muted); margin-top: 2px; font-size: .85em; line-height: 1.35; color: var(--muted);
white-space: pre-wrap; word-break: break-all; white-space: pre-wrap; word-break: break-all;
@@ -465,10 +463,10 @@ body.col-resizing, body.col-resizing * { cursor: col-resize !important; user-sel
.row .codes { white-space: nowrap; overflow: hidden; } .row .codes { white-space: nowrap; overflow: hidden; }
.row .codes > span { display: inline-flex; gap: 3px; vertical-align: 1px; } .row .codes > span { display: inline-flex; gap: 3px; vertical-align: 1px; }
.row .codes b, .tag-code { .row .codes b, .tag-code {
min-width: 2.2ch; padding: 1px 4px; border-radius: 5px; text-align: center; min-width: 2.2ch; padding: 0 4px; border-radius: 5px; text-align: center;
/* same font as the severity badges (the log font) */ /* same font as the severity badges (the log font) */
font-family: var(--log-font, var(--mono)); font-size: 10.5px; font-weight: 700; letter-spacing: .03em; font-family: var(--log-font, var(--mono)); font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
line-height: 1.35; font-variant-numeric: tabular-nums; line-height: 1.3; font-variant-numeric: tabular-nums;
background: var(--code-bg); color: #0b0f17; background: var(--code-bg); color: #0b0f17;
} }
.row .codes b.more { background: none; box-shadow: inset 0 0 0 1px var(--code-bg); color: var(--muted); } .row .codes b.more { background: none; box-shadow: inset 0 0 0 1px var(--code-bg); color: var(--muted); }