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>
90 lines
2.6 KiB
TypeScript
90 lines
2.6 KiB
TypeScript
import { useEffect, useRef, type ReactNode } from 'react';
|
|
|
|
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;
|
|
accent?: Accent;
|
|
onClose: () => void;
|
|
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,
|
|
size = '2xl',
|
|
}: ModalProps) {
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
|
|
useEffect(() => {
|
|
if (!open) return;
|
|
function onKey(e: KeyboardEvent) {
|
|
if (e.key === 'Escape') onClose();
|
|
}
|
|
document.addEventListener('keydown', onKey);
|
|
return () => document.removeEventListener('keydown', onKey);
|
|
}, [open, onClose]);
|
|
|
|
if (!open) return null;
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4"
|
|
onMouseDown={(e) => {
|
|
if (e.target === e.currentTarget) onClose();
|
|
}}
|
|
role="presentation"
|
|
>
|
|
<div
|
|
ref={ref}
|
|
role="dialog"
|
|
aria-modal="true"
|
|
aria-label={title}
|
|
data-testid={testid}
|
|
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 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>
|
|
<div className="min-w-0 flex-1 overflow-y-auto px-6 py-4">{children}</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|