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

---
 webui/src/features/postbox/PostboxAdminPanel.tsx | 5 +++--
 webui/src/styles/postbox.css                     | 4 ----
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/webui/src/features/postbox/PostboxAdminPanel.tsx b/webui/src/features/postbox/PostboxAdminPanel.tsx
index 497086e..7963a64 100644
--- a/webui/src/features/postbox/PostboxAdminPanel.tsx
+++ b/webui/src/features/postbox/PostboxAdminPanel.tsx
@@ -1,3 +1,4 @@
+import { MetricGrid } from "@govoplan/core-webui";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import {
   Archive,
@@ -1370,13 +1371,13 @@ function TemplateImpactPreview({
         </div>
         {preview.truncated ? <StatusBadge status="warning" label="List truncated" /> : null}
       </div>
-      <div className="metric-grid compact postbox-preview-metrics">
+      <MetricGrid columns="auto" density="compact" spacing="none" minimum="compact">
         <MetricCard label="Targets" value={preview.total} tone="info" />
         <MetricCard label="Ready" value={preview.ready_count} tone="good" />
         <MetricCard label="Existing" value={preview.existing_count} />
         <MetricCard label="Vacant" value={preview.vacant_count} tone="warning" />
         <MetricCard label="Blocked" value={preview.blocked_count} tone="danger" />
-      </div>
+      </MetricGrid>
       {preview.diagnostics.length ? (
         <p className="postbox-form-note">{preview.diagnostics.join(", ")}</p>
       ) : null}
diff --git a/webui/src/styles/postbox.css b/webui/src/styles/postbox.css
index f0df88a..1afef3c 100644
--- a/webui/src/styles/postbox.css
+++ b/webui/src/styles/postbox.css
@@ -485,10 +485,6 @@
   padding-top: 16px;
 }
 
-.postbox-preview-metrics.metric-grid {
-  margin: 0;
-}
-
 .postbox-preview-targets {
   max-height: 280px;
   display: grid;