UI: Make dialogs consistent and fix their dark mode background

[ryanahamilton]

The UI hand-assembled the same Chakra Dialog scaffolding in around fifty places, and it had drifted: close triggers, lazyMount/unmountOnExit flags, heading sizes and the placement of action buttons all varied, so a dialog's chrome depended on which screen opened it. Only 7 of ~50 dialogs used Dialog.Footer; the rest hand-rolled a right-aligned <Flex> of buttons inside the body.

This adds a shared Modal component that takes the structure as props, migrates the call sites onto it, and moves dialog theming into the Chakra slot recipe so it applies everywhere at once.

Notable user-facing changes

• Dark mode background fixed. Chakra defaults dialog content to bg.panel, which resolves to gray.950 in dark mode — far darker than the page, so dialogs looked detached. Both resolve to white in light mode, which is why this went unnoticed. Content now uses bg.
• Action buttons moved into a real footer on ~21 dialogs, separated by a top border.
• Dialog headers now carry the Nav sidebar's brand.muted tint, and the close button is styled like the nav buttons.
• A Cancel action is now supplied automatically alongside footerActions (opt out with hideCancelAction).
• Narrow viewports get a 4-unit gutter instead of the dialog sitting flush against the browser edges.

Before - Dark Mode	After - Dark Mode

Before - Light Mode	After - Light Mode

Points worth a reviewer's attention

• Footer button order is deliberately reversed in source. footerActions takes the primary action first so it leads the tab order, while flexDirection: row-reverse still renders it rightmost. Migrated call sites had their Cancel/Save order flipped to suit; passing them in the old order silently swaps the buttons on screen.
• lazyMount and unmountOnExit now default to true. 27 dialogs previously lacked unmountOnExit, so their state now resets on close. This is usually what you want, but it is a behaviour change for those.
• Dialog.Title replaces a plain Heading, which wires up aria-labelledby — the dialog is now announced by its title, which it was not before.
• The close button moved inside the flex header. This fixes a pre-existing overlap where it sat on top of right-aligned header content (DagImportErrorsModal / PluginImportErrorsModal search bars). One consequence: a modal with no title and no custom header renders no header, and therefore no close button.

Deliberately not migrated

Four dialogs keep raw Dialog because they do not fit the Header/Body/Footer slot order:

• ClearTaskInstanceConfirmationDialog — has no Dialog.Body at all and branches to null; the only user of Dialog.Description.
• MarkdownModal / DisplayMarkdownButton — a ResizableWrapper sits between Dialog.Content and the Header/Body pair.
• SearchDagsButton — a five-line command-palette dialog with none of the boilerplate Modal exists to remove.

The Edge3 provider has 12 more hand-rolled dialogs, but it is a separate distribution that cannot import airflow-core UI internals.

Testing

• 1012/1012 UI tests pass; Modal has 12 new tests covering slot overrides, footer ordering and DOM/tab order, the cancel action, and hideCancelAction
• pnpm lint (ESLint + tsc) and prek run --stage pre-commit clean
• Theming verified in a real browser in both colour modes, including size="full" and size="cover", since Chakra recipe styles are not present in the happy-dom test environment

Was generative AI tooling used to co-author this PR?

• Yes (please specify the tool below)

Claude Code (Opus 5)