Adopt shared WebUI layout primitives

webui/src/features/reporting/ProviderReportWorkspace.tsx

@@ -1,6 +1,6 @@
 import { Download, FileJson, Play, ShieldCheck } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
-import {
+import { ContentGrid, ActionToolbar,
   Button,
   Card,
   DismissibleAlert,
@@ -174,7 +174,7 @@ export function ProviderReportWorkspace({ settings, auth, report }: {
       </div>
       {execution ?
         <>
-          <div className="reporting-output-toolbar">
+          <ActionToolbar className="reporting-output-toolbar">
             <span>Generated {formatDateTime(execution.generated_at)}</span>
             {report.export_formats.includes("csv") &&
               <IconButton label="Download CSV" icon={<Download size={17} />} variant="ghost" onClick={() => void download("csv")} />
@@ -182,7 +182,7 @@ export function ProviderReportWorkspace({ settings, auth, report }: {
             {report.export_formats.includes("json") &&
               <IconButton label="Download JSON" icon={<FileJson size={17} />} variant="ghost" onClick={() => void download("json")} />
             }
-          </div>
+          </ActionToolbar>
           <div className="reporting-provider-output">
             <ProviderResult execution={execution} />
           </div>
@@ -227,11 +227,11 @@ function ProviderResult({ execution }: { execution: ProviderReportExecution }) {
         return (
           <Card title={group} key={group}>
             {metrics.length > 0 &&
-              <div className="dashboard-grid reporting-provider-metrics">
+              <ContentGrid columns={2} collapseAt="workspace" className="reporting-provider-metrics">
                 {metrics.map((field) =>
                   <MetricCard key={field.path} label={field.label} value={displayValue(pathValue(execution.result, field.path))} />
                 )}
-              </div>
+              </ContentGrid>
             }
             {details.length > 0 &&
               <dl className="detail-list">