Adopt shared WebUI layout primitives

webui/src/features/docs/DocsPage.tsx

@@ -1,3 +1,4 @@
+import { DescriptionList } from "@govoplan/core-webui";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { Link, useLocation } from "react-router";
 import { ChevronDown, ChevronRight, Eye, RefreshCw } from "lucide-react";
@@ -459,7 +460,7 @@ function ConstraintDetails({ id, constraints }: { id: string; constraints: Recor
   return (
     <div className="docs-detail-block" id={id}>
       <h4>i18n:govoplan-docs.requirements.09a428f9</h4>
-      <dl className="detail-list compact">
+      <DescriptionList variant="inline" density="compact">
         {constraints.map((constraint, index) => {
           const label = metadataString(constraint, "label");
           const description = metadataString(constraint, "description");
@@ -474,7 +475,7 @@ function ConstraintDetails({ id, constraints }: { id: string; constraints: Recor
             </div>
           );
         })}
-      </dl>
+      </DescriptionList>
     </div>
   );
 }
@@ -487,11 +488,11 @@ function ReferenceDetails({ topic, showTechnical, documentationType, topicById }
   return (
     <div className="docs-topic-details">
       {(route || screen || section) &&
-        <dl className="detail-list compact">
+        <DescriptionList variant="inline" density="compact">
           {screen && <div><dt>i18n:govoplan-docs.screen.c4878ec4</dt><dd>{screen}</dd></div>}
           {section && <div><dt>i18n:govoplan-docs.section.5e498158</dt><dd>{section}</dd></div>}
           {showTechnical && route && <div><dt>i18n:govoplan-docs.route.4999528e</dt><dd>{route}</dd></div>}
-        </dl>
+        </DescriptionList>
       }
       {!!fields.length && <ReferenceFieldTable id={`${topicAnchorId(topic)}-fields`} fields={fields} showTechnical={showTechnical} />}
       <RelatedTopics topic={topic} documentationType={documentationType} topicById={topicById} />
@@ -604,14 +605,14 @@ function UnavailableDocumentationReason({ topic }: { topic: DocsDocumentationTop
     <div className="docs-unavailable-reason">
       <p className="muted">{topic.reason}</p>
       {!!rows.length &&
-        <dl className="detail-list compact">
+        <DescriptionList variant="inline" density="compact">
           {rows.map(([label, values]) =>
             <div key={String(label)}>
               <dt>{label}</dt>
               <dd>{(values as string[]).join(", ")}</dd>
             </div>
           )}
-        </dl>
+        </DescriptionList>
       }
     </div>
   );
@@ -1001,7 +1002,7 @@ function RouteTable({ routes, emptyText }: { routes: DocsRoute[]; emptyText: str
 function PermissionList({ permissions }: { permissions: Array<{ scope: string; label: string; category: string }> }) {
   if (!permissions.length) return <p className="muted">i18n:govoplan-docs.no_granted_platform_permissions_found.36010898</p>;
   return (
-    <dl className="detail-list">
+    <DescriptionList variant="inline">
       {permissions.slice(0, 24).map((permission) =>
         <div key={permission.scope}>
           <dt>{permission.category}</dt>
@@ -1009,7 +1010,7 @@ function PermissionList({ permissions }: { permissions: Array<{ scope: string; l
         </div>
       )}
       {permissions.length > 24 && <div><dt>i18n:govoplan-docs.more.4bab2d8f</dt><dd>{permissions.length - 24} i18n:govoplan-docs.additional_permissions.8042cb01</dd></div>}
-    </dl>
+    </DescriptionList>
   );
 }
 
@@ -1047,7 +1048,7 @@ function EvidenceList({
   return (
     <>
       {sourceError && <DismissibleAlert tone="danger" resetKey={sourceError}>{sourceError}</DismissibleAlert>}
-      <dl className="detail-list">
+      <DescriptionList variant="inline">
         {modules.map((item) =>
           <div key={`${item.source_module_id}-${item.module_id}`}>
             <dt><StatusBadge status={item.status === "installed" ? "success" : "inactive"} label={item.status} /></dt>
@@ -1076,7 +1077,7 @@ function EvidenceList({
             </dd>
           </div>
         )}
-      </dl>
+      </DescriptionList>
       <Dialog
         open={selected !== null}
         title={selected?.label ?? "i18n:govoplan-docs.source_details.6dc79c75"}
@@ -1114,14 +1115,14 @@ function SourceInspectionGroup({ title, values }: { title: string; values: Array
   return (
     <section>
       <h3>{title}</h3>
-      <dl className="detail-list">
+      <DescriptionList variant="inline">
         {values.map(([key, value]) =>
           <div key={key}>
             <dt>{humanizeSourceKey(key)}</dt>
             <dd>{formatSourceValue(value)}</dd>
           </div>
         )}
-      </dl>
+      </DescriptionList>
     </section>
   );
 }