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.dom.test.tsx

@@ -143,7 +143,7 @@ function DialogToggle() {
     <>
       <button onClick={() => setOpen((v) => !v)}>toggle dialog</button>
       {open && (
-        <Modal title="dialog" onClose={() => setOpen(false)}>
+        <Modal initialFocus="close" title="dialog" onClose={() => setOpen(false)}>
           <p>inside</p>
         </Modal>
       )}
@@ -197,7 +197,7 @@ describe("the recorder pill", () => {
     const onClose = vi.fn();
     mount(
       { debug_session: session() },
-      <Modal title="dialog" onClose={onClose}>
+      <Modal initialFocus="close" title="dialog" onClose={onClose}>
         <p>inside</p>
       </Modal>,
     );
@@ -215,7 +215,7 @@ describe("the recorder pill", () => {
   it("Tab from the step prompt stays inside the dialog the pill sits in", () => {
     mount(
       { debug_session: session() },
-      <Modal title="dialog" onClose={() => {}}>
+      <Modal initialFocus="close" title="dialog" onClose={() => {}}>
         <p>inside</p>
       </Modal>,
     );