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

@@ -105,8 +105,14 @@ export default function AccountPanel({
   const a: AdminUserAccess | undefined = q.data;
 
   return (
-    <Modal title={displayName(user)} onClose={onClose} placement="drawer" maxWidth="max-w-md">
-      <div className="text-2xs text-muted truncate -mt-2 mb-4">{user.email}</div>
+    <Modal
+      initialFocus="close"
+      title={displayName(user)}
+      onClose={onClose}
+      placement="drawer"
+      maxWidth="max-w-md"
+    >
+      <div className="text-2xs text-muted truncate mb-4">{user.email}</div>
 
       {q.isError && !a ? (
         <StateMessage tone="error" onRetry={() => q.refetch()}>