Adopt shared WebUI layout primitives

webui/src/features/EncryptionAdminPanel.tsx

@@ -1,3 +1,4 @@
+import { MetricGrid } from "@govoplan/core-webui";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import {
   ArrowRightLeft,
@@ -286,12 +287,12 @@ export default function EncryptionAdminPanel({ settings, auth }: Props) {
     error={error}
     success={success}
     actions={<><Button onClick={() => void load()} disabled={busy}><RefreshCw aria-hidden="true" /> Reload</Button>{canAdmin && <Button variant="primary" onClick={() => setCreating(true)} disabled={busy}><Plus aria-hidden="true" /> Add vault</Button>}</>}>
-    <div className="metric-grid compact">
+    <MetricGrid density="compact">
       <MetricCard label="Vaults" value={vaults.length} tone="info" />
       <MetricCard label="Protected envelopes" value={preflight?.protected_count ?? envelopes.length} tone="info" />
       <MetricCard label="Unresolved before disable" value={unresolved} tone={unresolved ? "warning" : "good"} />
       <MetricCard label="Pending recoveries" value={recoveries.filter((item) => item.state === "pending").length} tone={recoveries.some((item) => item.state === "pending") ? "warning" : "good"} />
-    </div>
+    </MetricGrid>
 
     <Card title="Key vaults" collapsible collapseKey="encryption-vaults">
       <p className="muted small-note">The operator view contains lifecycle metadata only. Provider key references and key material are intentionally excluded.</p>