feat(design): dialogs open by purpose and keep their commit row pinned (E28 S3f1)

Modal takes a required initialFocus (field / close / action), a field that
loads late takes the focus while it still rests on the close button, and
ModalFooter portals a dialog's commit row under the scrolling body from any
depth. The header and footer fades follow the body's scroll timeline, and the
viewport's interactive-widget=resizes-content keeps the footer above an
on-screen keyboard.

frontend/src/components/ui/Modal.fullscreen.dom.test.tsx

@@ -33,7 +33,7 @@ describe("a dialog open while fullscreen is left", () => {
     document.body.appendChild(stage);
     setFullscreen(stage);
     render(
-      <Modal title="Download" onClose={() => {}}>
+      <Modal initialFocus="close" title="Download" onClose={() => {}}>
         <input aria-label="name" defaultValue="" />
       </Modal>,
     );
@@ -60,7 +60,7 @@ describe("a dialog with an autoFocus child", () => {
     // command palette, the download rename dialog and every non-danger confirm shipped with after
     // deep-review round 4 (found in round 5).
     render(
-      <Modal title="Search" onClose={() => {}}>
+      <Modal initialFocus="close" title="Search" onClose={() => {}}>
         <input aria-label="query" autoFocus />
       </Modal>,
     );
@@ -71,7 +71,7 @@ describe("a dialog with an autoFocus child", () => {
     const stage = document.createElement("div");
     document.body.appendChild(stage);
     render(
-      <Modal title="Search" onClose={() => {}}>
+      <Modal initialFocus="close" title="Search" onClose={() => {}}>
         <input aria-label="query" autoFocus />
       </Modal>,
     );