Skip to content

plugin-ai-moderation: "Edit Category" dialog renders transparent (shadcn utility classes missing from admin stylesheet) #3013

Description

@DavidPivert

Description

On the AI Moderation settings page (/_emdash/admin/plugins/ai-moderation/settings), clicking the pencil icon on a category opens CategoryDialog. The dark overlay shows up, but the dialog panel itself has no background and is drawn directly on top of the category list, which makes it unreadable (see screenshot).

Cause: CategoryDialog in packages/plugins/ai-moderation/src/admin.tsx (l.123-124 in the published 0.2.0) styles the panel with bg-background, the primary button with bg-primary text-primary-foreground, secondary buttons with hover:bg-muted, and the textarea with resize-none. None of these utilities exist in @emdash-cms/admin/dist/styles.css, which only ships the kumo-* tokens (bg-kumo-elevated, bg-kumo-brand, text-kumo-inverse, bg-kumo-fill, border-kumo-line…). The admin stylesheet is precompiled, so classes used by plugin admin modules are not scanned. The overlay's bg-black/50 does exist, hence the dimmed page with an invisible panel. Same family as #1607 / #1634 (Tailwind scanner miss), but in the plugin this time.

Suggested fix: switch the dialog to kumo utilities, e.g. bg-kumo-elevated border-kumo-line for the panel, bg-kumo-brand text-kumo-inverse for the primary button, hover:bg-kumo-fill for the secondary ones, and style={{ resize: "none" }} for the textarea. Happy to send a PR if that direction is right.

Workaround we use in the meantime: an adminEntry wrapper that re-exports the module and wraps /settings in a scoped <style> mapping those classes onto the kumo CSS variables.

Steps to reproduce

  1. Enable @emdash-cms/plugin-ai-moderation (any config; we use the default descriptor with a custom entrypoint that only adds a capability).
  2. Open Admin → Plugins → AI Moderation.
  3. Click the pencil icon on any category (e.g. C3 Trolling).
  4. The dialog fields and buttons are painted over the list, with no panel background.

Environment

  • emdash 0.37.0, @emdash-cms/admin 0.37.0, @emdash-cms/plugin-ai-moderation 0.2.0
  • Astro 7.3.x, Cloudflare Workers (D1 / R2 / KV), pnpm 10
  • Chrome on macOS, light theme (same in dark)

Screenshots

Screenshot available; the visible state is: overlay dims the page, dialog title "Edit Category", ID/Name/Description/Action fields and Cancel/Save buttons rendered transparently over the category rows C1–C5.

Logs / error output

No error: it is purely a CSS matter. Checking the shipped stylesheet:

grep -c '\.bg-background' node_modules/@emdash-cms/admin/dist/styles.css   # 0
grep -c '\.bg-primary\b' node_modules/@emdash-cms/admin/dist/styles.css   # 0
grep -c '\.bg-kumo-elevated' node_modules/@emdash-cms/admin/dist/styles.css # 1

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions