From a8ec72d8a96ae1721b38f3304e41a0a6f402edfa 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

---
 .../src/features/policy/RetentionPoliciesPanel.tsx  |  5 +++--
 webui/src/features/policy/ViewPoliciesPanel.tsx     | 13 +++++++------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/webui/src/features/policy/RetentionPoliciesPanel.tsx b/webui/src/features/policy/RetentionPoliciesPanel.tsx
index 8d31b10..eeb6529 100644
--- a/webui/src/features/policy/RetentionPoliciesPanel.tsx
+++ b/webui/src/features/policy/RetentionPoliciesPanel.tsx
@@ -1,3 +1,4 @@
+import { DescriptionList } from "@govoplan/core-webui";
 import { useEffect, useRef, useState } from "react";
 import {
   AdminPageLayout,
@@ -237,14 +238,14 @@ export default function RetentionPoliciesPanel({ settings, scopeType, canWrite }
             </Card>
             {retentionResult && (
               <Card title="Latest retention outcome" helpContextId="policy.retention.outcome">
-                <dl className="detail-list compact-detail-list">
+                <DescriptionList variant="inline" density="compact">
                   <div>
                     <dt>Operation</dt>
                     <dd><StatusBadge status={retentionResult.result.dry_run ? "info" : "success"} label={retentionResult.result.dry_run ? "Dry run" : "Applied"} /></dd>
                   </div>
                   <div><dt>Policy scope</dt><dd>{humanize(retentionResult.result.effective_policy_scope || "system")}</dd></div>
                   <div><dt>Reported outcomes</dt><dd>{resultRows.length}</dd></div>
-                </dl>
+                </DescriptionList>
                 <div className="admin-table-surface">
                   <DataGrid
                     id="policy-retention-outcomes"
diff --git a/webui/src/features/policy/ViewPoliciesPanel.tsx b/webui/src/features/policy/ViewPoliciesPanel.tsx
index 42bc1cd..9e8e007 100644
--- a/webui/src/features/policy/ViewPoliciesPanel.tsx
+++ b/webui/src/features/policy/ViewPoliciesPanel.tsx
@@ -1,3 +1,4 @@
+import { DescriptionItem, DescriptionList } from "@govoplan/core-webui";
 import { useEffect, useMemo, useState } from "react";
 import {
   AdminPageLayout,
@@ -333,12 +334,12 @@ export default function ViewPoliciesPanel({ settings, scopeType, canWrite }: Pro
             </Card>
 
             <Card title="Effective policy and provenance">
-              <dl className="admin-details-grid">
-                <div><dt>Local override</dt><dd><StatusBadge status={state.id ? "info" : "neutral"} label={state.id ? `Revision ${state.revision}` : "Inherited"} /></dd></div>
-                <div><dt>Allowed Views</dt><dd>{ceilingLabel(state.effective_policy.allowed_view_ids)}</dd></div>
-                <div><dt>Visible surfaces</dt><dd>{ceilingLabel(state.effective_policy.visible_surface_ids)}</dd></div>
-                <div><dt>Policy path</dt><dd>{state.source_path.length ? state.source_path.map((step) => `${step.scope_type}${step.scope_id ? `:${step.scope_id}` : ""}`).join(" -> ") : "Platform defaults"}</dd></div>
-              </dl>
+              <DescriptionList>
+                <DescriptionItem term={<>Local override</>}><StatusBadge status={state.id ? "info" : "neutral"} label={state.id ? `Revision ${state.revision}` : "Inherited"} /></DescriptionItem>
+                <DescriptionItem term={<>Allowed Views</>}>{ceilingLabel(state.effective_policy.allowed_view_ids)}</DescriptionItem>
+                <DescriptionItem term={<>Visible surfaces</>}>{ceilingLabel(state.effective_policy.visible_surface_ids)}</DescriptionItem>
+                <DescriptionItem term={<>Policy path</>}>{state.source_path.length ? state.source_path.map((step) => `${step.scope_type}${step.scope_id ? `:${step.scope_id}` : ""}`).join(" -> ") : "Platform defaults"}</DescriptionItem>
+              </DescriptionList>
             </Card>
           </>
         )}