fix(m5): modal layout for the test-template editor

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>
This commit is contained in:
Knacky
2026-05-13 08:31:13 +02:00
parent ce4bd40551
commit 873aa3774a
5 changed files with 51 additions and 9 deletions

View File

@@ -309,6 +309,7 @@ export function AdminScenariosPage() {
open={isModalOpen}
title={editing ? `Scenario · ${editing.name}` : 'New scenario template'}
accent="purple"
size="3xl"
onClose={() => {
setCreating(false);
setEditing(null);

View File

@@ -281,6 +281,7 @@ export function AdminTestsPage() {
open={isModalOpen}
title={editing ? `Test · ${editing.name}` : 'New test template'}
accent="orange"
size="7xl"
onClose={() => {
setCreating(false);
setEditing(null);
@@ -288,7 +289,7 @@ export function AdminTestsPage() {
testid="test-template-modal"
>
{error && <Alert accent="red" className="mb-3">{error}</Alert>}
<div className="grid gap-3">
<div className="flex flex-col gap-3 min-w-0">
<TextField
label="Name"
value={form.name}