Adopt shared WebUI layout primitives

webui/src/features/addressbook/AddressBookPage.tsx

@@ -1,3 +1,4 @@
+import { MetricGrid } from "@govoplan/core-webui";
 import { Download, Edit3, GitMerge, History, Link2, Network, Plus, RefreshCw, RotateCcw, Save, Search, ShieldCheck, Trash2, Upload, UserPlus, X } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState, type DragEvent as ReactDragEvent, type FormEvent } from "react";
 import { DialogSection, DialogForm, FormGrid, ActionToolbar,
@@ -3420,12 +3421,12 @@ export default function AddressBookPage({ settings, auth, onAuthChange }: Props)
         }>
         <LoadingFrame loading={qualityLoading} label="Loading address quality...">
           <div className="address-quality-layout">
-            {qualitySummary && <div className="metric-grid inside address-quality-metrics">
+            {qualitySummary && <MetricGrid spacing="inset" className="address-quality-metrics">
               <MetricCard label="Contacts" value={qualitySummary.contact_count} tone="info" detail={`${qualitySummary.contact_point_count} contact points`} />
               <MetricCard label="Corrections" value={qualitySummary.correction_count} tone={qualitySummary.correction_count > 0 ? "warning" : "good"} detail="Current non-valid states" />
               <MetricCard label="Duplicates" value={qualitySummary.duplicate_suggestion_count} tone={qualitySummary.duplicate_suggestion_count > 0 ? "warning" : "good"} detail="Explainable suggestions" />
               <MetricCard label="Undeliverable" value={(qualitySummary.quality_counts.undeliverable ?? 0) + (qualitySummary.quality_counts.returned ?? 0)} tone={(qualitySummary.quality_counts.undeliverable ?? 0) + (qualitySummary.quality_counts.returned ?? 0) > 0 ? "danger" : "good"} detail="Returned or undeliverable" />
-            </div>}
+            </MetricGrid>}
 
             <section className="address-quality-section">
               <div className="address-form-section-heading">