fix(kanban-dashboard): widen drawer, bump body fonts, fix code-block contrast (#19638)

Closes #18576. Addresses three of four complaints from the readability
report; live-verified in a dashboard against a seeded task with body,
comments, and run history.

- Drawer default width 480px → 640px, exposed as the CSS var
  `--hermes-kanban-drawer-width` so deployments / user themes can
  override without forking the plugin.
- Bump body/meta/pre/log/run-history font sizes from the 0.65-0.75rem
  cluster to the 0.78-0.85rem cluster. Long paths and code snippets in
  task bodies, run metadata, and worker logs are legible again instead
  of requiring a squint.
- Fix the black-text-on-dark-theme regression in fenced markdown code
  blocks. Root cause: themes that don't define `--color-foreground`
  (NERV, at least) leave `color: var(--color-foreground)` resolving
  empty on <code>, which then falls back to the UA default (near-black)
  instead of inheriting from the drawer's <body>. Fix: force
  `color: inherit` on both inline and fenced code, and give the fenced
  block background via `currentColor` instead of `--color-foreground`
  so there's a visible card even when the theme var is absent.

Out of scope for this PR (comments added to #18576):
- Draggable resize handle (structural JS work; plugin ships built-only,
  no src/ in-tree).
- Live worker-log viewer for running tasks (backend WS + component).
- Sibling fix: themes like NERV should define --color-foreground. The
  current changes make the drawer robust against that gap, but the
  root fix belongs in the theme layer.
This commit is contained in:
Teknium 2026-05-04 02:41:51 -07:00 committed by GitHub
parent 2a52e28568
commit bff484a51b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -268,7 +268,7 @@
}
.hermes-kanban-drawer {
width: min(480px, 92vw);
width: min(var(--hermes-kanban-drawer-width, 640px), 92vw);
height: 100vh;
background: var(--color-card);
border-left: 1px solid var(--color-border);
@ -334,7 +334,7 @@
.hermes-kanban-meta-row {
display: flex;
gap: 0.5rem;
font-size: 0.72rem;
font-size: 0.8rem;
}
.hermes-kanban-meta-label {
width: 92px;
@ -367,14 +367,15 @@
.hermes-kanban-pre {
margin: 0;
padding: 0.45rem 0.55rem;
padding: 0.5rem 0.6rem;
white-space: pre-wrap;
word-break: break-word;
background: color-mix(in srgb, var(--color-foreground) 4%, transparent);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm, 0.25rem);
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 0.72rem;
font-size: 0.8rem;
line-height: 1.5;
color: var(--color-foreground);
}
@ -605,8 +606,8 @@
/* ---- Markdown rendering -------------------------------------------- */
.hermes-kanban-md {
font-size: 0.8rem;
line-height: 1.55;
font-size: 0.85rem;
line-height: 1.6;
color: var(--color-foreground);
}
.hermes-kanban-md p { margin: 0.25rem 0; }
@ -632,15 +633,22 @@
}
.hermes-kanban-md code {
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 0.75rem;
font-size: 0.8rem;
padding: 0.05rem 0.3rem;
background: color-mix(in srgb, var(--color-foreground) 8%, transparent);
border-radius: 3px;
color: inherit;
}
/* Fenced code block. Set a visible background even when --color-foreground
* is empty (color-mix falls through to transparent in that case), and force
* color: inherit so the text tracks the drawer foreground rather than the
* UA default on <code> elements otherwise themes that don't set
* --color-foreground leave code text rendering near-black on dark themes
* (see issue #18576). */
.hermes-kanban-md-code {
margin: 0.35rem 0;
padding: 0.5rem 0.6rem;
background: color-mix(in srgb, var(--color-foreground) 5%, transparent);
background: color-mix(in srgb, currentColor 6%, transparent);
border: 1px solid var(--color-border);
border-radius: var(--radius-sm, 0.25rem);
overflow-x: auto;
@ -648,8 +656,9 @@
.hermes-kanban-md-code code {
background: transparent;
padding: 0;
font-size: 0.75rem;
font-size: 0.8rem;
white-space: pre;
color: inherit;
}
.hermes-kanban-md strong { font-weight: 600; }
@ -684,11 +693,11 @@
/* ---- Worker log pane ------------------------------------------------ */
.hermes-kanban-log {
max-height: 340px;
max-height: 360px;
overflow: auto;
white-space: pre;
font-size: 0.7rem;
line-height: 1.45;
font-size: 0.78rem;
line-height: 1.5;
}
@ -739,7 +748,8 @@
color: var(--color-muted-foreground);
}
.hermes-kanban-run-summary {
font-size: 0.75rem;
font-size: 0.82rem;
line-height: 1.5;
padding: 0.2rem 0 0;
color: var(--color-foreground);
}
@ -751,7 +761,8 @@
}
.hermes-kanban-run-meta {
display: block;
font-size: 0.65rem;
font-size: 0.72rem;
line-height: 1.5;
padding: 0.15rem 0 0;
color: var(--color-muted-foreground);
white-space: pre-wrap;