name	modal-layout-contract
description	Modal overflow, ModalDialogContent actions row, right-aligned wrapping footers (web + management-web).
version	1.0.0

Modal layout contract (`@metaboost/ui`)

When to use: Adding or changing dialogs (Modal), modal footers, or debugging horizontal scrollbars inside modals in apps/web, apps/management-web, or packages/ui shells (ConfirmDeleteModal, RateLimitModal, GoToPageModal).

Layout rules

Modal — full-window overlay; use withBackdrop / backdropOpaque for confirm dialogs. Pass onClose when the dialog is dismissible (shows close control).
ModalDialogContent — standard body wrapper for confirm/prompt dialogs and small forms inside Modal: readable max width, padding that clears the close button, optional actions slot.
ModalDialogContent actions — the standard footer for cancel/submit (and similar): justify-content: flex-end, flex-wrap: wrap, gap from tokens. Use in both web and management-web so confirm dialogs match the web baseline (right-aligned group).
Do not add ad hoc display: flex; justify-content: flex-end rows for modal footers when ModalDialogContent can own the actions prop — use ConfirmDeleteModal or compose ModalDialogContent directly.
Do not add overflow-x: hidden on the modal to mask overflow — fix the child (min-width: 0 on flex/grid items, actions wrap, break long unbreakable strings).
ModalDialogContent root uses min-width: 0, max-width, and overflow-wrap: anywhere so content cannot widen the panel; shared form components should still declare min-width: 0 on their own flex rows/columns where needed.
DOM order: secondary (Cancel) before primary (Submit / Confirm / Delete) inside actions (same as FormActions / use-form-component).
Non-modal forms: use FormActions from @metaboost/ui for page footers — same right-aligned, wrap, cancel-then-submit order.

Symptoms

Horizontal scrollbar on the modal panel or the page when the modal is open → often missing flex-wrap on actions, or a child with fixed width / min-width: auto in a flex context; check nested flex rows without min-width: 0.

css-custom-properties-no-var-fallbacks — no var(..., fallback) in modal SCSS
reusable-components — prefer Modal / ModalDialogContent over app-local dialog shells

Modal layout contract (@metaboost/ui)

Layout rules

Modal — full-window overlay; use withBackdrop / backdropOpaque for confirm dialogs. Pass onClose when the dialog is dismissible (shows close control).

ModalDialogContent — standard body wrapper for confirm/prompt dialogs and small forms inside Modal: readable max width, padding that clears the close button, optional actions slot.

ModalDialogContent actions — the standard footer for cancel/submit (and similar): justify-content: flex-end, flex-wrap: wrap, gap from tokens. Use in both web and management-web so confirm dialogs match the web baseline (right-aligned group).

Do not add ad hoc display: flex; justify-content: flex-end rows for modal footers when ModalDialogContent can own the actions prop — use ConfirmDeleteModal or compose ModalDialogContent directly.

Do not add overflow-x: hidden on the modal to mask overflow — fix the child (min-width: 0 on flex/grid items, actions wrap, break long unbreakable strings).

ModalDialogContent root uses min-width: 0, max-width, and overflow-wrap: anywhere so content cannot widen the panel; shared form components should still declare min-width: 0 on their own flex rows/columns where needed.

DOM order: secondary (Cancel) before primary (Submit / Confirm / Delete) inside actions (same as FormActions / use-form-component).

Non-modal forms: use FormActions from @metaboost/ui for page footers — same right-aligned, wrap, cancel-then-submit order.

Symptoms

Horizontal scrollbar on the modal panel or the page when the modal is open → often missing flex-wrap on actions, or a child with fixed width / min-width: auto in a flex context; check nested flex rows without min-width: 0.

css-custom-properties-no-var-fallbacks — no var(..., fallback) in modal SCSS

reusable-components — prefer Modal / ModalDialogContent over app-local dialog shells

modal-layout-contract