Adopt shared WebUI layout primitives

webui/src/features/reports/AggregateReportsPage.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Eye, RefreshCw } from "lucide-react";
 import { useSearchParams } from "react-router";
-import {
+import { ContentGrid,
   Button,
   Card,
   DataGrid,
@@ -208,7 +208,7 @@ export default function AggregateReportsPage({ settings }: {settings: ApiSetting
 
             {/* Aggregate outcome cards are deliberately not filter shortcuts: each subgroup
                 would require a separately suppressed aggregate response from the server. */}
-            <div className="dashboard-grid">
+            <ContentGrid columns={2} collapseAt="workspace" className="">
               <MetricCard label="i18n:govoplan-campaign.smtp_accepted.e3aa7603" value={countValue(outcomes.smtp_accepted)} tone="good" />
               <MetricCard label="Postbox accepted" value={countValue(outcomes.postbox_accepted)} tone="good" />
               <MetricCard label="Print accepted" value={countValue(outcomes.print_accepted)} tone="good" />
@@ -220,7 +220,7 @@ export default function AggregateReportsPage({ settings }: {settings: ApiSetting
               <MetricCard label="i18n:govoplan-campaign.not_attempted.e1be3c69" value={countValue(outcomes.not_attempted)} />
               <MetricCard label="i18n:govoplan-campaign.cancelled.a1bf92ef" value={countValue(outcomes.cancelled)} />
               <MetricCard label="i18n:govoplan-campaign.excluded.9804952b" value={countValue(outcomes.excluded)} />
-            </div>
+            </ContentGrid>
 
             <Card title="i18n:govoplan-campaign.population_and_exclusions.cdff62ad">
               <dl className="detail-list">