From b9a158c2cbbf7497a5162d334b75c76e05858669 Mon Sep 17 00:00:00 2001
From: Albrecht Degering <albrecht@degering.name>
Date: Tue, 18 Aug 2026 11:30:39 +0200
Subject: [PATCH] Adopt shared WebUI layout primitives

---
 webui/src/features/IdentityTrustPanel.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/webui/src/features/IdentityTrustPanel.tsx b/webui/src/features/IdentityTrustPanel.tsx
index ed522aa..8c62a73 100644
--- a/webui/src/features/IdentityTrustPanel.tsx
+++ b/webui/src/features/IdentityTrustPanel.tsx
@@ -1,3 +1,4 @@
+import { MetricGrid } from "@govoplan/core-webui";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { Eye, RefreshCw, RotateCw, ShieldOff } from "lucide-react";
 import {
@@ -247,12 +248,12 @@ export default function IdentityTrustPanel({ settings, auth, administrative = fa
     </Card>}
 
     <LoadingFrame loading={loading} label="Loading identity trust state">
-      <div className="metric-grid compact">
+      <MetricGrid density="compact">
         <MetricCard label="Active device keys" value={keys.filter((key) => key.status === "active").length} tone="good" />
         <MetricCard label="Revoked or expired" value={keys.filter((key) => key.status !== "active").length} tone="warning" />
         <MetricCard label="Active assurance evidence" value={activeEvidence.length} tone={activeEvidence.length ? "good" : "warning"} />
         <MetricCard label="Highest assurance" value={humanize(highestAssurance)} tone={highestAssurance === "None" ? "warning" : "info"} />
-      </div>
+      </MetricGrid>
 
       <Card title="Device keys" actions={<ToggleSwitch label="Show revoked and expired" checked={showRevoked} onChange={setShowRevoked} />}>
         <p className="muted small-note">Only public key and trust metadata are stored. Revocation blocks future server-mediated use but cannot erase plaintext or key material already obtained by a device.</p>