[plugin] Expanded event payloads render white on white in the admin dashboard

[gabiudrescu]

What happens

On a run's timeline, expanding an event shows an empty grey box. The JSON is in the DOM - 635 characters in my case - but invisible.

Why

Tabler styles pre for a dark code block:

pre { background: var(--tblr-bg-surface-dark); color: var(--tblr-light); }

index.html.twig (line 57) repaints the background light and does not touch the colour:

.durable-events pre {
    margin: .5rem 0 0; padding: .5rem; font-size: .8em;
    white-space: pre-wrap; word-break: break-word;
    background: var(--tblr-bg-surface-secondary);
    border-radius: var(--tblr-border-radius);
}

The result on Sylius 2.2.1's default admin theme is color: rgb(249,250,251) on background-color: rgb(249,250,251).

Reproduce

Sylius 2.2.1, gplanchat/durable-plugin v0.1.0-alpha10, default admin theme, light mode. Open /admin/durable/dashboard, select any run, expand any event under an action.

Suggested fix

One declaration in the same rule:

.durable-events pre { color: var(--tblr-body-color); /* … */ }

Verified in the browser: the payload becomes rgb(33,37,41) on rgb(249,250,251) and reads normally.

Workaround in use

A five-line template override that extends the original with @! and adds the rule to the stylesheets block.