From c16bb51aa3180da32619bd2f8b4e88e7a57b0183 Mon Sep 17 00:00:00 2001
From: Albrecht Degering <albrecht@degering.name>
Date: Tue, 18 Aug 2026 10:42:51 +0200
Subject: [PATCH] Adopt shared WebUI layout primitives

---
 .../features/datasources/DatasourcesPage.tsx  | 42 +++++++++----------
 webui/src/styles/datasources.css              |  9 +---
 2 files changed, 22 insertions(+), 29 deletions(-)

diff --git a/webui/src/features/datasources/DatasourcesPage.tsx b/webui/src/features/datasources/DatasourcesPage.tsx
index 128e14d..44dcfe0 100644
--- a/webui/src/features/datasources/DatasourcesPage.tsx
+++ b/webui/src/features/datasources/DatasourcesPage.tsx
@@ -19,7 +19,7 @@ import {
   Trash2,
   Upload
 } from "lucide-react";
-import {
+import { FormGrid, DialogSection, ToolbarGroup, ActionToolbar,
   ActionBlockerHint,
   Button,
   ConfirmDialog,
@@ -287,9 +287,9 @@ export default function DatasourcesPage({
     <main className="datasources-page">
       <div className="datasources-shell">
         <aside className="datasources-sidebar" aria-label="Datasource catalogue">
-          <div className="datasources-sidebar-toolbar">
+          <ActionToolbar className="datasources-sidebar-toolbar">
             <strong>Data</strong>
-            <span className="datasources-toolbar-actions">
+            <ToolbarGroup align="end" className="datasources-toolbar-actions">
               <IconButton
                 label="Refresh"
                 icon={<RefreshCw size={16} />}
@@ -306,8 +306,8 @@ export default function DatasourcesPage({
                 disabled={!canStage && !canManage}
                 disabledReason={!canStage && !canManage ? DATASOURCES_I18N.manageReason : undefined}
               />
-            </span>
-          </div>
+            </ToolbarGroup>
+          </ActionToolbar>
           <div className="datasources-view-switch">
             <SegmentedControl<CatalogueView>
               ariaLabel="Datasource view"
@@ -398,7 +398,7 @@ export default function DatasourcesPage({
         </aside>
 
         <section className="datasources-workspace">
-          <div className="datasources-workspace-toolbar">
+          <ActionToolbar className="datasources-workspace-toolbar">
             <span className="datasources-current-title">
               {view === "catalogue" ? <DatabaseZap size={19} />
                 : view === "staging" ? <Layers3 size={19} />
@@ -420,7 +420,7 @@ export default function DatasourcesPage({
                 </small>
               </span>
             </span>
-            <span className="datasources-toolbar-actions">
+            <ToolbarGroup align="end" className="datasources-toolbar-actions">
               <DocumentationHelpLink reference={DATASOURCES_DOCUMENTATION} />
               {view === "catalogue" && selectedDatasource?.mode === "cached" ? (
                 <Button onClick={() => void refreshSelected()} disabled={!canManage || working} disabledReason={working ? DATASOURCES_I18N.working : !canManage ? DATASOURCES_I18N.manageReason : undefined}>
@@ -469,8 +469,8 @@ export default function DatasourcesPage({
                   <Plus size={16} /> Register
                 </Button>
               ) : null}
-            </span>
-          </div>
+            </ToolbarGroup>
+          </ActionToolbar>
 
           <div className="datasources-alerts">
             {error ? (
@@ -972,8 +972,8 @@ function GovernanceDialog({
     >
       {error ? <DismissibleAlert tone="danger" resetKey={error}>{error}</DismissibleAlert> : null}
       {draft ? (
-        <div className="datasources-dialog-fields">
-          <div className="datasources-dialog-grid">
+        <DialogSection className="datasources-dialog-fields">
+          <FormGrid columns={2} gap="small" collapseAt="narrow">
             <FormField label="Authority mode" documentation={DATASOURCE_GOVERNANCE_DOCUMENTATION}>
               <select
                 value={draft.authority_mode}
@@ -1025,11 +1025,11 @@ function GovernanceDialog({
             <FormField label="Correction procedure">
               <input value={draft.correction_procedure_ref ?? ""} onChange={(event) => setValue("correction_procedure_ref", event.target.value || null)} />
             </FormField>
-          </div>
+          </FormGrid>
           <FormField label="Semantic definition" documentation={DATASOURCE_GOVERNANCE_DOCUMENTATION}>
             <textarea value={draft.semantic_definition ?? ""} onChange={(event) => setValue("semantic_definition", event.target.value || null)} />
           </FormField>
-          <div className="datasources-dialog-grid">
+          <FormGrid columns={2} gap="small" collapseAt="narrow">
             <GovernanceListField label="Purposes" values={draft.purposes} onChange={(values) => setValue("purposes", values)} />
             <GovernanceListField label="Legal basis references" values={draft.legal_basis_refs} onChange={(values) => setValue("legal_basis_refs", values)} />
             <GovernanceListField label="Official keys" values={draft.official_keys} onChange={(values) => setValue("official_keys", values)} />
@@ -1037,16 +1037,16 @@ function GovernanceDialog({
             <GovernanceListField label="Affected services and processes" values={draft.affected_refs} onChange={(values) => setValue("affected_refs", values)} />
             <GovernanceListField label="Dependent flows, reports, controls and decisions" values={draft.dependency_refs} onChange={(values) => setValue("dependency_refs", values)} />
             <GovernanceListField label="Known limits" values={draft.known_limits} onChange={(values) => setValue("known_limits", values)} />
-          </div>
-          <div className="datasources-dialog-grid">
+          </FormGrid>
+          <FormGrid columns={2} gap="small" collapseAt="narrow">
             <FormField label="Freshness policy (JSON)" documentation={DATASOURCE_GOVERNANCE_DOCUMENTATION}>
               <textarea value={freshness} onChange={(event) => setFreshness(event.target.value)} spellCheck={false} />
             </FormField>
             <FormField label="Quality policy (JSON)" documentation={DATASOURCE_GOVERNANCE_DOCUMENTATION}>
               <textarea value={quality} onChange={(event) => setQuality(event.target.value)} spellCheck={false} />
             </FormField>
-          </div>
-        </div>
+          </FormGrid>
+        </DialogSection>
       ) : null}
     </Dialog>
   );
@@ -1283,7 +1283,7 @@ function AddDatasourceDialog({
         </>
       )}
     >
-      <div className="datasources-dialog-fields">
+      <DialogSection className="datasources-dialog-fields">
         {error ? (
           <DismissibleAlert tone="danger" resetKey={error}>{error}</DismissibleAlert>
         ) : null}
@@ -1336,7 +1336,7 @@ function AddDatasourceDialog({
             </FormField>
           </>
         )}
-        <div className="datasources-dialog-grid">
+        <FormGrid columns={2} gap="small" collapseAt="narrow">
           <FormField label="Name" documentation={DATASOURCE_FIELDS_DOCUMENTATION}>
             <input value={name} onChange={(event) => setName(event.target.value)} />
           </FormField>
@@ -1349,7 +1349,7 @@ function AddDatasourceDialog({
               disabled={Boolean(targetRef)}
             />
           </FormField>
-        </div>
+        </FormGrid>
         <FormField label="Description">
           <input value={description} onChange={(event) => setDescription(event.target.value)} />
         </FormField>
@@ -1421,7 +1421,7 @@ function AddDatasourceDialog({
             )}
           </>
         ) : null}
-      </div>
+      </DialogSection>
     </Dialog>
   );
 }
diff --git a/webui/src/styles/datasources.css b/webui/src/styles/datasources.css
index 7afd78c..60d7ef7 100644
--- a/webui/src/styles/datasources.css
+++ b/webui/src/styles/datasources.css
@@ -487,12 +487,6 @@
   font-size: 12px;
 }
 
-.datasources-dialog-grid {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
-  gap: 12px;
-}
-
 .datasources-dialog-copy {
   margin: 0 0 14px;
   color: var(--muted);
@@ -539,8 +533,7 @@
 
 @media (max-width: 560px) {
   .datasources-metrics,
-  .datasources-key-values,
-  .datasources-dialog-grid {
+  .datasources-key-values {
     grid-template-columns: 1fr;
   }