Adopt shared WebUI layout primitives

webui/src/features/dashboard/DashboardPage.tsx

@@ -1,3 +1,4 @@
+import { MetricGrid } from "@govoplan/core-webui";
 import {
   useEffect,
   useMemo,
@@ -491,7 +492,7 @@ export default function DashboardPage({
       }
     >
 
-        <div className="metric-grid dashboard-summary-grid">
+        <MetricGrid className="dashboard-summary-metrics">
           <MetricCard
             label="Active interface modules"
             value={modules.length}
@@ -516,7 +517,7 @@ export default function DashboardPage({
             tone="neutral"
             detail={layoutSourceLabel(layoutSource)}
           />
-        </div>
+        </MetricGrid>
 
         <LoadingFrame loading={loading} label="Loading Dashboard layout">
           {configuring ? (

webui/src/features/dashboard/widgets/InstalledModulesWidget.tsx

@@ -1,3 +1,4 @@
+import { DescriptionList } from "@govoplan/core-webui";
 import {
   StatusBadge,
   type DashboardWidgetConfiguration,
@@ -26,7 +27,7 @@ export default function InstalledModulesWidget({
 
   return (
     <>
-      <dl className="detail-list dashboard-compact-list">
+      <DescriptionList variant="inline" termWidth="compact">
         {visibleModules.map((module) =>
         <div key={module.id}>
             <dt><StatusBadge status="success" label={module.id} /></dt>
@@ -36,7 +37,7 @@ export default function InstalledModulesWidget({
             </dd>
           </div>
         )}
-      </dl>
+      </DescriptionList>
       {remaining > 0 && <p className="muted dashboard-widget-overflow">+{remaining} more active interface modules</p>}
     </>);
 }

webui/src/styles/dashboard.css

@@ -2,7 +2,7 @@
   margin-top: 18px;
 }
 
-.dashboard-summary-grid .metric-detail {
+.dashboard-summary-metrics .metric-detail {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -47,15 +47,6 @@
   grid-column-end: span 4;
 }
 
-.dashboard-compact-list.detail-list div {
-  grid-template-columns: minmax(92px, auto) minmax(0, 1fr);
-}
-
-.dashboard-widget-metrics.metric-grid {
-  grid-template-columns: repeat(3, minmax(120px, 1fr));
-  margin-bottom: 0;
-}
-
 .dashboard-config-workspace {
   display: flex;
   min-width: 0;
@@ -338,10 +329,6 @@
 
 @media (max-width: 900px) {
   .dashboard-widget-grid,
-  .dashboard-widget-metrics.metric-grid {
-    grid-template-columns: 1fr;
-  }
-
   .dashboard-widget-library {
     grid-template-columns: minmax(0, 1fr) 36px;
   }