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

@@ -23,7 +23,7 @@ import { qk } from "../lib/queryKeys";
 import { dockUnderToasts } from "../lib/toastDock";
 import { useMe } from "../lib/useMe";
 import { Button } from "./ui/Button";
-import Modal from "./ui/Modal";
+import Modal, { ModalFooter } from "./ui/Modal";
 import { LoadingState, StateMessage } from "./ui/QueryState";
 import SegmentedToggle from "./ui/SegmentedToggle";
 import IssueComposer from "./IssueComposer";
@@ -97,7 +97,7 @@ function StartDialog() {
   const minutes = me.diagnostics.session_minutes;
   const levels: readonly DebugSessionLevel[] = ["DEBUG", "TRACE"];
   return (
-    <Modal title={t("recorder.start.title")} onClose={closeRecorderStart}>
+    <Modal initialFocus="field" title={t("recorder.start.title")} onClose={closeRecorderStart}>
       <div className="flex flex-col gap-4">
         <p className="text-sm text-muted leading-relaxed">{t("recorder.start.intro")}</p>
         <div className="flex flex-col items-start gap-1.5">
@@ -122,7 +122,7 @@ function StartDialog() {
             {t("recorder.start.cap", { count: minutes })}
           </p>
         </div>
-        <div className="flex justify-end gap-2">
+        <ModalFooter>
           <Button variant="ghost" onClick={closeRecorderStart}>
             {t("common.cancel")}
           </Button>
@@ -134,7 +134,7 @@ function StartDialog() {
           >
             {t("recorder.start.confirm")}
           </Button>
-        </div>
+        </ModalFooter>
       </div>
     </Modal>
   );