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

@@ -1,6 +1,6 @@
 import { useCallback, useState, type ReactNode } from "react";
 import { useTranslation } from "react-i18next";
-import Modal from "./ui/Modal";
+import Modal, { ModalFooter } from "./ui/Modal";
 import { Button } from "./ui/Button";
 import { ChoiceContext, type ChoiceFn, type ChoiceOptions } from "./confirmContext";
 
@@ -35,6 +35,7 @@ export function ConfirmProvider({ children }: { children: ReactNode }) {
       {children}
       {state && (
         <Modal
+          initialFocus="action"
           title={state.opts.title ?? t("common.confirmTitle")}
           onClose={() => close(null)}
           maxWidth={choices.length > 1 ? "max-w-md" : "max-w-sm"}
@@ -43,8 +44,8 @@ export function ConfirmProvider({ children }: { children: ReactNode }) {
           {/* One action: the familiar Cancel/Confirm row. Two or more: a column, because side by
               side they wrap raggedly and a wrapped button reads as a second, lesser group — and
               these are peers. Ordered least to most destructive, top to bottom. */}
-          <div
-            className={multi ? "flex flex-col gap-2 mt-5" : "flex justify-end gap-2 mt-5 flex-wrap"}
+          <ModalFooter
+            className={multi ? "flex flex-col gap-2" : "flex flex-wrap justify-end gap-2"}
           >
             <Button
               variant="outline"
@@ -66,7 +67,7 @@ export function ConfirmProvider({ children }: { children: ReactNode }) {
                 {c.label || t("common.confirm")}
               </Button>
             ))}
-          </div>
+          </ModalFooter>
         </Modal>
       )}
     </ChoiceContext.Provider>