Skip to content

Check-result dropdown with severity badges in node title - #95

Merged
Bilchreis merged 1 commit into
mainfrom
check-dropdown
Aug 3, 2026
Merged

Check-result dropdown with severity badges in node title#95
Bilchreis merged 1 commit into
mainfrom
check-dropdown

Conversation

@Bilchreis

Copy link
Copy Markdown
Owner

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)

  • The node title (status icon + equipment name) is now a dropdown trigger.
    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).
  • Next to the title, one badge per severity class shows the diagnostic count
    (e.g. 4 ERROR), sorted most-severe first with matching daisyUI badge
    colors.
  • Severity ranking and badge-class mapping are extracted into
    severity_rank/1 and severity_badge_class/1 helpers, replacing the inline
    case duplication.

Responsive badge layout

  • The title row now uses flex-wrap, with shrink-0 on the icon and
    shrink-0 whitespace-nowrap on the badges. On narrow viewports badges wrap
    to 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)

  • With the theme toggle on "system", daisyUI followed
    prefers-color-scheme (via prefersdark: true) but the Tailwind dark:
    variant only matched an explicit [data-theme=dark] — so daisy-styled UI
    went dark while dark:-styled elements (e.g. the module cards) stayed
    light.
  • The dark custom variant now also fires under
    @media (prefers-color-scheme: dark) when no explicit
    [data-theme=light] is set, matching daisyUI's behavior. The
    .command_item dark override gets the same companion media query.
  • Explicit light/dark modes are unaffected; explicit light under a dark OS
    stays fully light.

Agent tooling (.claude/skills/run-app/)

  • Adds a project skill describing how to run and visually verify the 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:

  • Dropdown badges stay intact as whole pills at narrow widths (1080px) with
    the 4-error sim node selected.
  • System + OS-dark now renders module cards dark; system + OS-light and both
    explicit modes unchanged.

@Bilchreis Bilchreis linked an issue Aug 3, 2026 that may be closed by this pull request
@Bilchreis
Bilchreis merged commit 32c733a into main Aug 3, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

secop check drop down

1 participant