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
- Enable
@emdash-cms/plugin-ai-moderation (any config; we use the default descriptor with a custom entrypoint that only adds a capability).
- Open Admin → Plugins → AI Moderation.
- Click the pencil icon on any category (e.g. C3 Trolling).
- 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
Description
On the AI Moderation settings page (
/_emdash/admin/plugins/ai-moderation/settings), clicking the pencil icon on a category opensCategoryDialog. 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:
CategoryDialoginpackages/plugins/ai-moderation/src/admin.tsx(l.123-124 in the published 0.2.0) styles the panel withbg-background, the primary button withbg-primary text-primary-foreground, secondary buttons withhover:bg-muted, and the textarea withresize-none. None of these utilities exist in@emdash-cms/admin/dist/styles.css, which only ships thekumo-*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'sbg-black/50does 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-linefor the panel,bg-kumo-brand text-kumo-inversefor the primary button,hover:bg-kumo-fillfor the secondary ones, andstyle={{ resize: "none" }}for the textarea. Happy to send a PR if that direction is right.Workaround we use in the meantime: an
adminEntrywrapper that re-exports the module and wraps/settingsin a scoped<style>mapping those classes onto the kumo CSS variables.Steps to reproduce
@emdash-cms/plugin-ai-moderation(any config; we use the default descriptor with a custom entrypoint that only adds a capability).Environment
emdash0.37.0,@emdash-cms/admin0.37.0,@emdash-cms/plugin-ai-moderation0.2.0pnpm10Screenshots
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: