Adopt shared WebUI layout primitives

webui/src/features/operator/OperatorQueuePage.tsx

@@ -1,3 +1,4 @@
+import { MetricGrid } from "@govoplan/core-webui";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Ban, ExternalLink, Eye, Pause, Play, RotateCcw, Send, ShieldCheck } from "lucide-react";
 import { useSearchParams } from "react-router";
@@ -774,7 +775,7 @@ export default function OperatorQueuePage({ settings, auth }: {settings: ApiSett
 
       <section className="queue-pressure-section" aria-labelledby="operator-queue-pressure-title">
         <h2 id="operator-queue-pressure-title" className="queue-pressure-heading">i18n:govoplan-campaign.queue_pressure.28eee15e</h2>
-        <div className="metric-grid queue-pressure-grid">
+        <MetricGrid columns="auto" spacing="none" className="queue-pressure-metrics">
           <MetricCard label="i18n:govoplan-campaign.queued.6a599877" value={totals.queued} tone="neutral" />
           <MetricCard label="i18n:govoplan-campaign.claimed.83c87884" value={totals.claimed} tone="info" />
           <MetricCard label="i18n:govoplan-campaign.sending.ceafde86" value={totals.sending} tone="info" />
@@ -784,7 +785,7 @@ export default function OperatorQueuePage({ settings, auth }: {settings: ApiSett
           <MetricCard label="i18n:govoplan-campaign.unattempted.e7411dd6" value={totals.notAttempted} tone="neutral" />
           <MetricCard label="i18n:govoplan-campaign.paused.c7dfb6f1" value={totals.paused} tone="neutral" />
           <MetricCard label="i18n:govoplan-campaign.imap_failed.50dbca55" value={totals.imapFailed} tone="warning" />
-        </div>
+        </MetricGrid>
       </section>
 
       <LoadingFrame loading={loading} label="i18n:govoplan-campaign.loading_operator_queue.ae6576e0">