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>

frontend/src/components/MitreTagPicker.tsx

@@ -83,7 +83,7 @@ export function MitreTagPicker({ value, onChange, className }: MitreTagPickerPro
   }
 
   return (
-    <div className={cn('rounded-lg border border-border bg-bg-card p-4', className)} data-testid="mitre-tag-picker">
+    <div className={cn('rounded-lg border border-border bg-bg-card p-4 min-w-0', className)} data-testid="mitre-tag-picker">
       {/* Selection chips */}
       {value.length > 0 && (
         <div className="mb-3 flex flex-wrap items-center gap-1" data-testid="mitre-selected">
@@ -132,9 +132,15 @@ export function MitreTagPicker({ value, onChange, className }: MitreTagPickerPro
           aria-label="MITRE ATT&CK matrix"
           /* `minmax(7rem, 1fr)` ensures every cell is wide enough for the
            * longest single word in MITRE names (no mid-word breaks), and
-           * stretches to fill the container otherwise. Horizontal scroll only
-           * kicks in on narrow viewports below ~1680px. */
-          className="grid gap-px bg-border rounded overflow-x-auto"
+           * stretches to fill the container otherwise. The wrapper scrolls
+           * horizontally — placing `overflow-x-auto` on the grid itself fails
+           * because the grid's intrinsic min-width (15 × 7rem) prevents it
+           * from shrinking below its parent, so the grid spills out instead
+           * of scrolling. */
+          className="overflow-x-auto rounded min-w-0 w-full"
+        >
+        <div
+          className="grid gap-px bg-border"
           style={{
             gridTemplateColumns: `repeat(${matrix.data.tactics.length}, minmax(7rem, 1fr))`,
           }}
@@ -276,6 +282,7 @@ export function MitreTagPicker({ value, onChange, className }: MitreTagPickerPro
             );
           })}
         </div>
+        </div>
       )}
 
       <p className="mt-3 font-sans text-[11px] text-text-dim">

frontend/src/components/ui/Modal.tsx

@@ -4,6 +4,20 @@ import { Button } from '@/components/ui/Button';
 import { SectionHeader } from '@/components/ui/SectionHeader';
 import { type Accent } from '@/lib/cn';
 
+type ModalSize = 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl' | '7xl';
+
+const SIZE_CLASS: Record<ModalSize, string> = {
+  md: 'max-w-md',
+  lg: 'max-w-lg',
+  xl: 'max-w-xl',
+  '2xl': 'max-w-2xl',
+  '3xl': 'max-w-3xl',
+  '4xl': 'max-w-4xl',
+  '5xl': 'max-w-5xl',
+  '6xl': 'max-w-6xl',
+  '7xl': 'max-w-7xl',
+};
+
 interface ModalProps {
   open: boolean;
   title: string;
@@ -12,14 +26,27 @@ interface ModalProps {
   children: ReactNode;
   /** Optional name to give the dialog role for screen readers / Playwright. */
   testid?: string;
+  /** Max-width preset. Defaults to `2xl` to keep historical behavior. */
+  size?: ModalSize;
 }
 
 /**
  * Centered modal with a backdrop. Closes on Escape and on backdrop click.
  * The accessible name comes from the SectionHeader's `highlight`, so the dialog
  * can be located via `getByRole('dialog', { name: ... })`.
+ *
+ * The dialog caps its height at the viewport and scrolls its body internally,
+ * so tall content (MITRE matrix, long forms) never escapes the viewport.
  */
-export function Modal({ open, title, accent = 'cyan', onClose, children, testid }: ModalProps) {
+export function Modal({
+  open,
+  title,
+  accent = 'cyan',
+  onClose,
+  children,
+  testid,
+  size = '2xl',
+}: ModalProps) {
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -47,15 +74,15 @@ export function Modal({ open, title, accent = 'cyan', onClose, children, testid
         aria-modal="true"
         aria-label={title}
         data-testid={testid}
-        className="w-full max-w-2xl rounded-lg border border-border bg-bg-base p-6 shadow-2xl"
+        className={`flex w-full ${SIZE_CLASS[size]} max-h-[calc(100vh-2rem)] flex-col rounded-lg border border-border bg-bg-base shadow-2xl`}
       >
-        <div className="flex items-start justify-between gap-4">
+        <div className="flex shrink-0 items-start justify-between gap-4 border-b border-border px-6 pt-6 pb-2">
           <SectionHeader prefix="Edit" highlight={title} accent={accent} className="mt-0 mb-4" />
           <Button variant="ghost" onClick={onClose} aria-label="Close dialog">
             ✕
           </Button>
         </div>
-        {children}
+        <div className="min-w-0 flex-1 overflow-y-auto px-6 py-4">{children}</div>
       </div>
     </div>
   );