refactor: simplify resource queries and layout tests

vitest.config.ts

@@ -1,8 +1,12 @@
 import { fileURLToPath, URL } from "node:url";
 import react from "@vitejs/plugin-react";
+import { playwright } from "@vitest/browser-playwright";
 import { configDefaults, defineConfig } from "vitest/config";
 
 const CI_TEST_TIMEOUT_MS = 15_000;
+const LAYOUT_VIEWPORT_HEIGHT = 900;
+const LAYOUT_NARROW_WIDTH = 375;
+const LAYOUT_WIDE_WIDTH = 1280;
 
 export default defineConfig({
 	plugins: [react()],
@@ -10,9 +14,47 @@ export default defineConfig({
 	test: {
 		// CI runs the UI scenarios with coverage on a slower runner.
 		testTimeout: process.env.CI ? CI_TEST_TIMEOUT_MS : undefined,
-		environment: "jsdom",
-		exclude: configDefaults.exclude,
-		setupFiles: "./src/test/setup.ts",
+		projects: [
+			{
+				extends: true,
+				test: {
+					name: "unit",
+					environment: "jsdom",
+					exclude: [...configDefaults.exclude, "**/*.browser.test.tsx"],
+					setupFiles: "./src/test/setup.ts",
+				},
+			},
+			{
+				extends: true,
+				test: {
+					name: "browser",
+					include: ["src/**/*.browser.test.tsx"],
+					browser: {
+						enabled: true,
+						provider: playwright(),
+						headless: true,
+						instances: [
+							{
+								browser: "chromium",
+								name: "browser-narrow",
+								viewport: {
+									width: LAYOUT_NARROW_WIDTH,
+									height: LAYOUT_VIEWPORT_HEIGHT,
+								},
+							},
+							{
+								browser: "chromium",
+								name: "browser-wide",
+								viewport: {
+									width: LAYOUT_WIDE_WIDTH,
+									height: LAYOUT_VIEWPORT_HEIGHT,
+								},
+							},
+						],
+					},
+				},
+			},
+		],
 		coverage: {
 			include: ["src/**/*.{ts,tsx}", "packages/*/src/**/*.{ts,tsx}"],
 			exclude: ["src/test/**", "**/*.test.{ts,tsx}", "**/*.stories.tsx"],