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/ui/CommandPalette.tsx

@@ -194,11 +194,16 @@ function CommandPaletteBody({ onClose, groups }: { onClose: () => void; groups:
   };
 
   return (
-    <Modal title={t("palette.title")} onClose={onClose} maxWidth="max-w-xl" placement="top">
+    <Modal
+      initialFocus="field"
+      title={t("palette.title")}
+      onClose={onClose}
+      maxWidth="max-w-xl"
+      placement="top"
+    >
       <div className={clsx(fieldClass({ size: "lg" }), "flex items-center gap-2")}>
         <Search className="w-4 h-4 shrink-0 text-muted" />
         <InnerInput
-          autoFocus
           value={query}
           onChange={(e) => {
             setQuery(e.target.value);