Centralize metric and description layouts

webui/src/features/dashboard/DashboardPage.tsx

@@ -1,6 +1,8 @@
 import ContentGrid from "../../components/ContentGrid";
 import Card from "../../components/Card";
 import MetricCard from "../../components/MetricCard";
+import MetricGrid from "../../components/MetricGrid";
+import DescriptionList from "../../components/DescriptionList";
 import PageLayout from "../../components/PageLayout";
 import { usePlatformModules } from "../../platform/ModuleContext";
 
@@ -13,22 +15,22 @@ export default function DashboardPage() {
       description="Install and enable the dashboard module to make this page configurable."
       viewportClassName="core-dashboard-page"
     >
-      <div className="metric-grid">
+      <MetricGrid>
         <MetricCard label="i18n:govoplan-core.installed_modules.32b3e799" value={modules.length} tone="info" detail={modules.length ? moduleLabels(modules).join(", ") : "i18n:govoplan-core.core_only.d46ce7d9"} />
         <MetricCard label="Dashboard module" value="not installed" tone="neutral" detail="Core fallback is active." />
-      </div>
+      </MetricGrid>
 
       <ContentGrid columns={2} collapseAt="workspace" className="">
         <Card title="i18n:govoplan-core.installed_modules.32b3e799">
           {modules.length === 0 ? <p className="muted">i18n:govoplan-core.no_feature_modules_are_active.e9c2d936</p> :
-          <dl className="detail-list">
+          <DescriptionList variant="inline">
               {modules.map((module) =>
             <div key={module.id}>
                   <dt>{module.id}</dt>
                   <dd><strong>{module.label}</strong><span className="muted"> i18n:govoplan-core.v.26c12f1e{module.version}</span></dd>
                 </div>
             )}
-            </dl>
+            </DescriptionList>
           }
         </Card>
         <Card title="Home">