Check-result dropdown with severity badges in node title - #95
Merged
Conversation
Closed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Turns the node title's check-result indicator into an interactive dropdown and
fixes two issues found while verifying it: badge layout breaking on narrow
screens, and the dark theme only half-applying in "system" theme mode.
Changes
Check-result dropdown (
secop_components.ex)Opening it shows all check diagnostics, color-coded by severity, plus the
SECoP version the node was checked against (scrollable panel, capped at
max-h-96).(e.g.
4 ERROR), sorted most-severe first with matching daisyUI badgecolors.
severity_rank/1andseverity_badge_class/1helpers, replacing the inlinecaseduplication.Responsive badge layout
flex-wrap, withshrink-0on the icon andshrink-0 whitespace-nowrapon the badges. On narrow viewports badges wrapto the next line as whole pills instead of being squeezed until their text
breaks mid-badge ("4" / "ERROR" on separate lines). This also holds when a
node has several severity badges.
Dark mode in "system" theme mode (
app.css)prefers-color-scheme(viaprefersdark: true) but the Tailwinddark:variant only matched an explicit
[data-theme=dark]— so daisy-styled UIwent dark while
dark:-styled elements (e.g. the module cards) stayedlight.
darkcustom variant now also fires under@media (prefers-color-scheme: dark)when no explicit[data-theme=light]is set, matching daisyUI's behavior. The.command_itemdark override gets the same companion media query.stays fully light.
Agent tooling (
.claude/skills/run-app/)against the user-managed dev server, plus a Playwright-based screenshot
helper that waits for LiveView/ECharts content before capturing.
Playwright itself is not a project dependency — the helper resolves it from
the invoking directory (agent scratchpad).
Verification
Verified against the running dev server with headless Chrome at multiple
viewport sizes:
the 4-error sim node selected.
explicit modes unchanged.