fix(admin): scope body colors and mobile dialog sizing to admin pages

[masonjames]

What does this PR do?

When the admin stylesheet reaches a public page, its unlayered body colors override layered theme styles, and its mobile dialog rule narrows full-screen navigation overlays by 32px.

Scope these two rules to body:has(> #admin-root). Dialogs remain descendants of the admin body, so the mobile width limit still applies when they portal outside #admin-root. No new page marker or runtime changes are needed.

The dev-only stylesheet traces are outside this patch, as allowed in the maintainer approval.

Addresses #1811 (body and dialog scoping).

Type of change

• Bug fix
• Feature (requires maintainer-approved Discussion)
• Refactor (no behavior change)
• Translation
• Documentation
• Performance improvement
• Tests
• Chore (dependencies, CI, tooling)

Checklist

• I have read CONTRIBUTING.md
• pnpm typecheck passes
• pnpm lint passes
• pnpm test passes (or targeted tests for my change)
• pnpm format has been run
• I have added/updated tests for my changes (if applicable)
• User-visible strings in the admin UI are wrapped for translation (if applicable). Do not include messages.po changes except in translation PRs — a workflow extracts catalogs on merge to main.
• I have added and reviewed the user-facing changeset (if this PR changes a published package)
• New features link to an approved Discussion: not applicable; bug fix approved in the linked issue comment.
• I have included screenshots below if this PR changes the UI

AI-generated code disclosure

• This PR includes AI-generated code — model/tool: GPT-6 (Codex)

Screenshots / test output

• Added three browser tests against the compiled admin stylesheet: public layered body colors, a full-width public mobile dialog, and the admin portal width limit. Before the fix, the two public-page cases fail and the admin case passes; all three pass after the fix.
• pnpm format, root pnpm build, pnpm typecheck, pnpm lint:quick, and type-aware pnpm --silent lint:json pass (zero diagnostics).
• pnpm --filter @emdash-cms/admin test run tests/styles.test.ts passes (3 tests).
• The admin test command rebuilds CSS before Vitest. Verified with missing compiled CSS, then temporarily reverted the source selectors while leaving the passing artifact in place: the command rebuilt it and the two public regressions failed. Restoring the fix produced 3 passing tests again.
• No new translatable strings.

Verified in a disposable local copy of masonjames.com at revision 52f683c (EmDash 1.1.0 / Astro 7.3.5), with a seeded local database and local storage. To exercise the leakage scenario, the compiled admin CSS was explicitly loaded on public pages and the site's existing body/menu workarounds were removed only in that disposable copy. The served fixed CSS matches the built artifact byte-for-byte.

At a 390 × 844 viewport:

Surface	Before	After
Public mobile menu, light and dark	358px wide	390px wide
Public light body background	oklch(0.98 0 0)	Theme color oklch(0.972 0.018 92)
Public dark body background	oklch(0.12 0 0)	Theme color oklch(0.205 0.032 172)
Arabic RTL admin create-menu dialog	—	358px wide, 16px side margins, portaled outside #admin-root, light and dark

Before/after public-menu screenshots and the Arabic admin dialog screenshot are attached below.

Public menu before (358px)	Public menu after (390px)

[changeset-bot]

🦋 Changeset detected

Latest commit: e1b762a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 12 packages

Name	Type
@emdash-cms/admin	Patch
emdash	Patch
@emdash-cms/cloudflare	Patch
@emdash-cms/plugin-test	Patch
@emdash-cms/sandbox-workerd	Patch
@emdash-cms/auth	Patch
@emdash-cms/blocks	Patch
create-emdash	Patch
@emdash-cms/gutenberg-to-portable-text	Patch
@emdash-cms/x402	Patch
@emdash-cms/auth-atproto	Patch
@emdash-cms/plugin-embeds	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[emdashbot]

The approach is sound: scoping the two unlayered admin rules to body:has(> #admin-root) lets the existing admin shell marker decide when the styles apply, so leaking the admin stylesheet onto a public page no longer clobbers public body colors or mobile dialogs. The selector matches the actual admin.astro markup (#admin-root is a direct child of <body>), and portaled dialogs still sit inside that <body> so the mobile width cap still works for admin. The changeset is clear and present-tense.

I checked the markup in packages/core/src/astro/routes/admin.astro, the existing :has() usage elsewhere in styles.css, the Vitest browser config, the AGENTS.md workflow guidance, and the changeset README. The CSS changes themselves look correct. The only concern is the new style regression test importing the built dist/styles.css artifact, which is gitignored and not present on a fresh checkout; without a build first, the test can fail or (worse) pass against stale compiled CSS.

[pkg-pr-new]

Open in StackBlitz

@emdash-cms/admin

npm i https://pkg.pr.new/@emdash-cms/admin@3867

@emdash-cms/auth

npm i https://pkg.pr.new/@emdash-cms/auth@3867

@emdash-cms/auth-atproto

npm i https://pkg.pr.new/@emdash-cms/auth-atproto@3867

@emdash-cms/blocks

npm i https://pkg.pr.new/@emdash-cms/blocks@3867

@emdash-cms/cloudflare

npm i https://pkg.pr.new/@emdash-cms/cloudflare@3867

@emdash-cms/contentful-to-portable-text

npm i https://pkg.pr.new/@emdash-cms/contentful-to-portable-text@3867

emdash

npm i https://pkg.pr.new/emdash@3867

create-emdash

npm i https://pkg.pr.new/create-emdash@3867

@emdash-cms/gutenberg-to-portable-text

npm i https://pkg.pr.new/@emdash-cms/gutenberg-to-portable-text@3867

@emdash-cms/plugin-cli

npm i https://pkg.pr.new/@emdash-cms/plugin-cli@3867

@emdash-cms/plugin-test

npm i https://pkg.pr.new/@emdash-cms/plugin-test@3867

@emdash-cms/plugin-types

npm i https://pkg.pr.new/@emdash-cms/plugin-types@3867

@emdash-cms/registry-client

npm i https://pkg.pr.new/@emdash-cms/registry-client@3867

@emdash-cms/registry-lexicons

npm i https://pkg.pr.new/@emdash-cms/registry-lexicons@3867

@emdash-cms/registry-loader

npm i https://pkg.pr.new/@emdash-cms/registry-loader@3867

@emdash-cms/registry-moderation

npm i https://pkg.pr.new/@emdash-cms/registry-moderation@3867

@emdash-cms/registry-verification

npm i https://pkg.pr.new/@emdash-cms/registry-verification@3867

@emdash-cms/sandbox-workerd

npm i https://pkg.pr.new/@emdash-cms/sandbox-workerd@3867

@emdash-cms/x402

npm i https://pkg.pr.new/@emdash-cms/x402@3867

@emdash-cms/plugin-ai-moderation

npm i https://pkg.pr.new/@emdash-cms/plugin-ai-moderation@3867

@emdash-cms/plugin-atproto

npm i https://pkg.pr.new/@emdash-cms/plugin-atproto@3867

@emdash-cms/plugin-audit-log

npm i https://pkg.pr.new/@emdash-cms/plugin-audit-log@3867

@emdash-cms/plugin-color

npm i https://pkg.pr.new/@emdash-cms/plugin-color@3867

@emdash-cms/plugin-embeds

npm i https://pkg.pr.new/@emdash-cms/plugin-embeds@3867

@emdash-cms/plugin-field-kit

npm i https://pkg.pr.new/@emdash-cms/plugin-field-kit@3867

@emdash-cms/plugin-forms

npm i https://pkg.pr.new/@emdash-cms/plugin-forms@3867

@emdash-cms/plugin-webhook-notifier

npm i https://pkg.pr.new/@emdash-cms/plugin-webhook-notifier@3867

commit: e1b762a

[emdashbot]

The approach is sound and the prior concern is resolved in spirit: scoping the two unlayered admin rules to body:has(> #admin-root) matches the admin shell markup in packages/core/src/astro/routes/admin.astro, so leaking the admin stylesheet onto a public page no longer clobbers public body colors or mobile dialogs, while portaled admin dialogs still inherit the width cap. The previous review's worry about importing a gitignored, potentially stale dist/styles.css is now addressed with a pre-test build step.

I checked the scoped selectors against the admin Astro markup, the three new browser tests, the Vitest browser config, the Tailwind CLI usage, and the changeset. The only remaining issue is the command used in the new pre-test build step: it invokes pnpm exec tailwindcss, while the package's own build script uses npx @tailwindcss/cli. In Tailwind v4 the CLI is @tailwindcss/cli, and the lockfile only marks that package as hasBin: true; the tailwindcss package itself does not advertise a bin. Matching the existing build command makes the pre-test step reliable on a fresh checkout and in CI.