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

@@ -22,7 +22,7 @@ import { qk } from "../lib/queryKeys";
 import { LEVEL_TAG, logClock } from "./logLineParts";
 import { Button } from "./ui/Button";
 import { IconButton } from "./ui/IconButton";
-import Modal from "./ui/Modal";
+import Modal, { ModalFooter } from "./ui/Modal";
 import { LoadingState, StateMessage } from "./ui/QueryState";
 import SegmentedToggle from "./ui/SegmentedToggle";
 import { Textarea, Input } from "./ui/Input";
@@ -61,7 +61,12 @@ export default function IssueComposer({ id }: { id: string }) {
     [],
   );
   return (
-    <Modal title={t("recorder.composer.title")} onClose={closeComposer} maxWidth="max-w-5xl">
+    <Modal
+      initialFocus="field"
+      title={t("recorder.composer.title")}
+      onClose={closeComposer}
+      maxWidth="max-w-5xl"
+    >
       {failed && !(sessionQ.data && eventsQ.data) ? (
         <StateMessage
           tone="error"
@@ -410,7 +415,7 @@ function ComposerBody({
           />
         </div>
       )}
-      <div className="flex flex-wrap items-center justify-end gap-2 border-t border-border pt-3">
+      <ModalFooter>
         <span className="mr-auto flex flex-col text-xs text-muted">
           {target && <span>{t("recorder.composer.target", { repo: target.repo })}</span>}
           <span aria-live="polite">
@@ -447,7 +452,7 @@ function ComposerBody({
             {t("recorder.composer.send")}
           </Button>
         )}
-      </div>
+      </ModalFooter>
     </div>
   );
 }