feat(e10): finish the mappable Button migration, including the ui/ layer itself

Third sweep, 20 more sites: the rest of AdminUsers (the access-request
and invite clusters), Scheduler, SettingsPanel, SetupWizard, About, Feed,
KeyGate, OnboardingWizard -- and, importantly, four platform components
that were still hand-rolling their own buttons: Modal's close, Banner's
dismiss, SidePanel's two toggles and QueryState's retry. A platform layer
that bypasses its own primitive is the same defect one level up.

Hand-rolled buttons with their own geometry: 110 -> 39; Button call sites
37 -> 106. What is left is deliberate, and it is the list Button's own
docstring excludes plus two families this pass refused to force: video
overlay controls painted on white/N, drag handles, chip removers,
accent-solid pills, the bg-card family on the signed-out screen, and
sites whose paint is conditional (`suspended ? warn : neutral`) or
otherwise has no variant yet. Forcing those through a className override
would be unsafe without tailwind-merge, which is exactly the hazard this
sprint documented.

3x tsc, eslint, knip, prettier, 689 vitest green; UAT on Settings and the
About dialog (its close button and full-width CTA are both migrated),
clean console.

frontend/src/components/ui/Modal.tsx

@@ -5,6 +5,7 @@ import { X } from "lucide-react";
 import { useBackToClose } from "../../lib/history";
 import { pushLayer, removeLayer, isTopmost } from "../../lib/layerStack";
 import { useFullscreenElement } from "../../lib/fullscreen";
+import { Button } from "./Button";
 
 // Tabbable elements inside the dialog, in DOM order. `:not([tabindex="-1"])` drops programmatically
 // focusable-only nodes; the visibility filter (offsetParent) drops display:none ones (e.g. a
@@ -141,14 +142,15 @@ export default function Modal({
           <h2 id={titleId} className="text-lg font-semibold leading-snug">
             {title}
           </h2>
-          <button
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            className="shrink-0"
             onClick={onClose}
             title={t("common.close")}
             aria-label={t("common.close")}
-            className="shrink-0 p-1.5 rounded-lg text-muted hover:text-fg hover:bg-surface transition"
-          >
-            <X className="w-4 h-4" />
-          </button>
+            icon={<X className="w-4 h-4" />}
+          />
         </div>
         <div className="px-5 pb-5">{children}</div>
       </div>