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/ErrorDialog.tsx

@@ -1,7 +1,7 @@
 import { useSyncExternalStore } from "react";
 import { useTranslation } from "react-i18next";
 import { dismissError, getError, subscribeError } from "../lib/errorDialog";
-import Modal from "./ui/Modal";
+import Modal, { ModalFooter } from "./ui/Modal";
 import { Button } from "./ui/Button";
 
 // Renders the current app error (if any) as a modal the user must acknowledge.
@@ -10,11 +10,11 @@ export default function ErrorDialog() {
   const err = useSyncExternalStore(subscribeError, getError, getError);
   if (!err) return null;
   return (
-    <Modal title={err.title} onClose={dismissError} maxWidth="max-w-md">
+    <Modal initialFocus="close" title={err.title} onClose={dismissError} maxWidth="max-w-md">
       <p className="text-sm leading-relaxed text-fg/90">{err.message}</p>
-      <div className="flex justify-end mt-5">
+      <ModalFooter>
         <Button onClick={dismissError}>{t("errors.ok")}</Button>
-      </div>
+      </ModalFooter>
     </Modal>
   );
 }