Skip to content

fix(kanban): reset code element background inside board#20648

Closed
liuguangyong93 wants to merge 1 commit into
NousResearch:mainfrom
liuguangyong93:fix/kanban-code-element-contrast
Closed

fix(kanban): reset code element background inside board#20648
liuguangyong93 wants to merge 1 commit into
NousResearch:mainfrom
liuguangyong93:fix/kanban-code-element-contrast

Conversation

@liuguangyong93
Copy link
Copy Markdown

Problem

The Nous DS globals.css applies a global rule:

*::selection,
code {
  background: var(--selection-bg, var(--midground));
  @apply text-background;
}

This paints an opaque cream/yellow fill on every <code> element. The kanban dashboard drawer uses <code> tags to render:

  • Event payloads (.hermes-kanban-event-payload)
  • Run metadata (.hermes-kanban-run-meta)
  • Worker log panes (.hermes-kanban-pre)

As a result, these sections display solid colored blocks that completely obscure the text content underneath.

Before

Event payloads and run history sections show opaque yellow/cream rectangles covering all text — completely unreadable:

before

After

Text is clearly visible with proper contrast against the dark background:

after

(Screenshots omitted from this PR — the fix is straightforward to verify locally.)

Fix

Add a scoped reset at the top of the kanban plugin stylesheet:

.hermes-kanban code {
  background: transparent;
  color: inherit;
}

This ensures <code> elements inside the kanban board inherit their parent's color and stay transparent, without affecting the DS selection/code styling elsewhere.

Testing

  • Opened the kanban dashboard drawer on a task with events and run history
  • Verified event payload text, run-meta, and worker log are all readable
  • Confirmed no visual regression on other dashboard pages

The Nous DS globals.css applies a global rule:
  code { background: var(--midground); color: var(--background); }

This paints an opaque cream/yellow fill on every <code> element,
which hides text in the kanban drawer's event-payload, run-meta,
and worker-log panes (all rendered as <code>).

Fix: scope a reset inside .hermes-kanban so <code> elements inherit
their parent's color and stay transparent.
@alt-glitch alt-glitch added type/bug Something isn't working comp/plugins Plugin system and bundled plugins P3 Low — cosmetic, nice to have duplicate This issue or pull request already exists labels May 6, 2026
@alt-glitch
Copy link
Copy Markdown
Collaborator

Duplicate of #20461 — same CSS fix (kanban <code> element background reset from Nous DS globals.css). #20461 is further ahead in review.

@teknium1
Copy link
Copy Markdown
Contributor

teknium1 commented May 6, 2026

Merged via PR #20687 (rebase-merge, commit 17687911). Your commit is on main with authorship preserved. Thanks — the diagnosis was exactly right: the Nous DS bare `code` rule was winning on specificity against every per-selector patch attempt. The scoped `.hermes-kanban code` override is the minimal root-cause fix, and it cascades to event-payload, run-meta, and markdown code in one rule.

#20687

@teknium1
Copy link
Copy Markdown
Contributor

teknium1 commented May 6, 2026

Your commit was cherry-picked to main via PR #20687 (commit 17687911) with your authorship preserved in git log. Closing this PR since the change is now on main — GitHub didn't auto-close it because the cherry-pick SHA differs from your branch commit, but git log main --author=liuguangyong shows your commit landed cleanly.

Thanks again for the root-cause diagnosis.

@teknium1 teknium1 closed this May 6, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

comp/plugins Plugin system and bundled plugins duplicate This issue or pull request already exists P3 Low — cosmetic, nice to have type/bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants