fix(web): unify responsive layouts and control sizing

.agents/skills/cueweaver-design/SKILL.md

@@ -76,6 +76,28 @@ when reused.
 - A smaller type size is allowed only for non-functional decoration such as a
   brand mark or step number, and the exception must remain local and explicit.
 
+## Layout Ownership
+
+- Use `components/layout.tsx` for repeated layout patterns: `Workflow` and
+  `WorkflowStep` share the Translate content column; `SectionToolbar` centers
+  headings and actions; `SettingsRow` owns setting alignment; `FormField` owns
+  label spacing. Use `PageHeader`'s action slot for page-level creation actions.
+- Align workflow notes and submission content with the step content column.
+  Keep step numbers in their own column. Align flat list text with its heading;
+  keep normal inner padding for bordered controls and tables.
+- The shell's `workspace-content` centers one bounded canvas. Keep narrower
+  forms left-aligned inside it rather than centering each page child separately.
+- Ordinary Button actions keep their text on one line and do not shrink.
+  Use `layout="item"` for content-driven, multiline choices such as Media rows.
+  Give the neighboring content room to shrink or wrap the action group.
+- Keep control sizing in `components/ui/controls.css`. Page styles own widths
+  and arrangement; change primitive tokens or variants for sizing changes.
+- Use container queries for split views and setting rows. The navigation's
+  768px breakpoint does not determine whether content fits in two columns.
+- Bound Media result lists without bounding the whole workflow. Term map
+  pagination searches all entries and leaves complete content available to
+  replacement operations.
+
 ## Product States
 
 - Design loading, empty, error, disabled, and available states with the same layout
@@ -118,13 +140,20 @@ inspection alone.
 - Use the repository's `agent-browser` skill and Agent Browser tool as the only
   browser inspection path. Before running a browser command, load its current
   workflow with `agent-browser skills get core`.
-- Check 1280x800 and 390x844 viewports with Agent Browser.
+- Run `pnpm --dir web test:layout http://127.0.0.1:<web-port>` against a running
+  local Web server. This Agent Browser matrix uses synthetic responses and
+  checks actual control bounds, action text clipping, alignment, overflow,
+  intermediate widths, Chinese/German, themes, and resource states.
+- Visually check 1280x800 and 390x844 screenshots, plus intermediate-width
+  layouts. The automated matrix supplements this inspection.
 - Check Translate, Jobs, Settings, and Term maps at affected loading, empty,
   error, and populated states.
 - Check System, Light, and Dark preferences at desktop and mobile widths,
   including system-theme changes, hierarchy, and contrast.
 - Inspect computed font size, line height, control height, gap, and margins for
-  the changed controls. Same-kind controls must not silently diverge.
+  the changed controls. Measure rendered height, not just CSS `min-height`.
+  Compare left edges within each content column and centers in single-line
+  toolbars. Same-kind controls must not silently diverge.
 - Confirm there is no horizontal overflow, fixed-navigation overlap, clipped
   focus ring, or unexplained blank vertical region.
 - Capture screenshots for meaningful layout changes and treat unexpected

AGENTS.md

@@ -24,6 +24,7 @@ Single-context: `CONTEXT.md` + `docs/adr/` at the repo root. See `docs/agents/do
 - Run commands from the repository root.
 - Run the local development environment with `scripts/dev.sh`. Vite serves the Web app and proxies `/api` to the loopback-only API backend; use `CUEWEAVER_MEDIA_ROOT`, `CUEWEAVER_WORK_ROOT`, `API_PORT`, and `WEB_PORT` to override defaults.
 - Run backend tests with `scripts/test-backend.sh`, frontend tests with `scripts/test-frontend.sh`, and Docker E2E with `scripts/test-e2e.sh`.
+- For frontend layout, styling, or responsive behavior changes, run `pnpm --dir web test:layout http://127.0.0.1:<web-port>` against a running local Web server. This requires `agent-browser` and is separate from the regular test suites. Follow `.agents/skills/cueweaver-design/SKILL.md` for visual verification requirements.
 - Run static checks and the frontend build with `scripts/lint-backend.sh --check` and `scripts/lint-frontend.sh --check`; the `--check` flag prevents formatting changes.
 - Run focused tests with `uv run pytest -q tests/test_product_app.py` or `pnpm --dir web exec vitest run tests/app.test.tsx`.
 - Test localization behavior and invariants, not translation wording. Do not assert exact translated strings unless the wording is a product contract; semantically equivalent rewrites should normally not require test changes. Prefer checking key completeness and non-empty values, placeholder preservation, pluralization behavior, structured-value parseability, and forbidden untranslated product-domain terms.

web/eslint.config.js

@@ -9,6 +9,13 @@ export default tseslint.config(
   {
     ignores: ["dist", "coverage", "playwright-report", "test-results"],
   },
+  {
+    files: ["tests/browser/*.{js,mjs}"],
+    extends: [js.configs.recommended, prettier],
+    languageOptions: {
+      globals: { ...globals.browser, ...globals.node },
+    },
+  },
   {
     extends: [js.configs.recommended, ...tseslint.configs.recommended, prettier],
     files: ["**/*.{ts,tsx}"],

web/package.json

@@ -13,6 +13,7 @@
     "lint:fix": "eslint . --fix",
     "check": "pnpm format:check && pnpm lint && pnpm typecheck && pnpm build",
     "test": "vitest run",
+    "test:layout": "node tests/browser/check-layout.mjs",
     "test:e2e": "playwright test",
     "typecheck": "tsc -b"
   },