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

.changeset/green-baths-doubt.md

@@ -0,0 +1,5 @@
+---
+"@emdash-cms/admin": patch
+---
+
+Fixes admin body colors and mobile dialog width limits overriding public themes when the admin stylesheet is loaded on a public page.

packages/admin/package.json

@@ -48,7 +48,7 @@
     "dev": "tsdown --watch",
     "prepublishOnly": "node --run build",
     "check": "publint && attw --pack --ignore-rules=cjs-resolves-to-esm --ignore-rules=no-resolution",
-    "test": "vitest",
+    "test": "pnpm exec tailwindcss -i src/styles.css -o dist/styles.css --minify && vitest",
     "typecheck": "tsgo --noEmit",
     "locale:compile": "lingui compile --namespace es",
     "locale:copy": "node ./scripts/copy-locales.js",

packages/admin/src/styles.css

@@ -84,7 +84,7 @@
 	border-color: var(--color-kumo-line);
 }
 
-body {
+body:has(> #admin-root) {
 	background-color: var(--color-kumo-elevated);
 	color: var(--text-color-kumo-default);
 	-webkit-font-smoothing: antialiased;
@@ -675,7 +675,7 @@ div:has(> [role="listbox"] > .emdash-compact-select-option) {
  * which overrides max-width in CSS. We need to cap min-width too.
  */
 @media (max-width: 639px) {
-	[role="dialog"] {
+	body:has(> #admin-root) [role="dialog"] {
 		min-width: 0 !important;
 		max-width: calc(100vw - 2rem);
 	}

packages/admin/tests/styles.test.ts

@@ -0,0 +1,53 @@
+import { afterEach, beforeEach, expect, it } from "vitest";
+import { page } from "vitest/browser";
+
+import "../dist/styles.css";
+
+let theme: HTMLStyleElement;
+let root: HTMLDivElement;
+
+beforeEach(() => {
+	theme = document.createElement("style");
+	theme.textContent = `@layer theme {
+		body { background-color: rgb(12, 34, 56); color: rgb(210, 220, 230); }
+		[role="dialog"] { position: fixed; inset: 0; width: 100vw; }
+	}`;
+	document.head.append(theme);
+	root = document.createElement("div");
+	document.body.append(root);
+});
+
+afterEach(async () => {
+	theme.remove();
+	root.remove();
+	await page.viewport(1280, 800);
+});
+
+it("preserves a public theme's layered body colors when admin CSS is loaded", () => {
+	expect(getComputedStyle(document.body).backgroundColor).toBe("rgb(12, 34, 56)");
+	expect(getComputedStyle(document.body).color).toBe("rgb(210, 220, 230)");
+});
+
+it("preserves a public full-width mobile dialog when admin CSS is loaded", async () => {
+	await page.viewport(375, 800);
+	const dialog = document.createElement("div");
+	dialog.setAttribute("role", "dialog");
+	root.append(dialog);
+	expect(dialog.getBoundingClientRect().width).toBe(375);
+});
+
+it("keeps portaled admin dialogs within the mobile viewport", async () => {
+	await page.viewport(375, 800);
+	root.id = "admin-root";
+	const portal = document.createElement("div");
+	const dialog = document.createElement("div");
+	dialog.setAttribute("role", "dialog");
+	dialog.style.minWidth = "512px";
+	portal.append(dialog);
+	document.body.append(portal);
+	try {
+		expect(dialog.getBoundingClientRect().width).toBe(343);
+	} finally {
+		portal.remove();
+	}
+});