873aa3774a
The +New test modal capped at max-w-2xl rendered the 15-column MITRE matrix in a 672px frame with no height cap, so the matrix spilled to the right of the dialog, the form bottom dropped below the viewport, and neither scroll direction worked — buttons were unreachable. - Modal: add a `size` prop (default 2xl, back-compat) with a `7xl` preset. Cap height at calc(100vh-2rem), make the header sticky, and wrap children in a min-w-0 flex-1 overflow-y-auto body so tall content scrolls inside. - MitreTagPicker: move overflow-x-auto from the grid itself to a dedicated scroller wrapper, and add `min-w-0` so the constraint propagates from the modal body. The grid's 1680px intrinsic min-width previously prevented the parent's overflow-x-auto from kicking in. - AdminTestsPage: switch the form layout from `grid gap-3` to `flex flex-col gap-3 min-w-0` and set the modal size to 7xl. The CSS Grid form was propagating min-width: auto to all its items, which let the picker drag the body past the modal width. - AdminScenariosPage: bump the modal to size 3xl for breathing room around the catalogue picker. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Metamorph frontend
Vite + React 18 + TypeScript + TailwindCSS. Design tokens from ../tasks/design.md are in tailwind.config.ts.
Local dev
npm install
npm run dev # http://localhost:5173 (proxies /api/* to http://localhost:8000)
Build
npm run build # outputs to dist/
npm run preview # serves dist/ on http://localhost:8080
Quality
npm run typecheck
npm run lint
npm run format
Layout
src/
├── App.tsx # M0 home page (health check + design tokens demo)
├── main.tsx
├── index.css # Tailwind base + tinted-accent utilities
├── components/ui/ # RTOps design primitives: Card, Tag, SectionHeader, FlowNode, Button
├── lib/
│ ├── api.ts # fetch wrapper (M2 will replace with auth-aware client)
│ └── cn.ts # classnames + ACCENTS palette
└── vite-env.d.ts