Adopt shared WebUI layout primitives

webui/src/features/riskCompliance/RiskCompliancePage.tsx

@@ -17,7 +17,7 @@ import {
   type FormEvent
 } from "react";
 import { useSearchParams } from "react-router";
-import {
+import { FormGrid, ActionToolbar, ToolbarSpacer,
   ActionBlockerHint,
   Button,
   ConfirmDialog,
@@ -247,7 +247,7 @@ export default function RiskCompliancePage({
 
   return (
     <main className="risk-page">
-      <div className="risk-toolbar">
+      <ActionToolbar className="risk-toolbar">
         <SegmentedControl
           value={view}
           onChange={setView}
@@ -300,7 +300,7 @@ export default function RiskCompliancePage({
             }
           ]}
         />
-        <span className="risk-toolbar-spacer" />
+        <ToolbarSpacer className="risk-toolbar-spacer" />
         <DocumentationHelpLink reference={RISK_COMPLIANCE_DOCUMENTATION} />
         {loading && <LoadingIndicator size="sm" label="Loading" />}
         <IconButton
@@ -310,7 +310,7 @@ export default function RiskCompliancePage({
           disabled={loading || busy}
           disabledReason={loading ? RISK_COMPLIANCE_I18N.loading : busy ? RISK_COMPLIANCE_I18N.busy : undefined}
         />
-      </div>
+      </ActionToolbar>
       {(error || notice) && (
         <div className="risk-alerts">
           {error && (
@@ -1523,7 +1523,7 @@ function AssuranceNodeDialog({
     >
       <DocumentationHelpLink reference={RISK_COMPLIANCE_DOCUMENTATION} />
       <form id="risk-assurance-node-form" className="risk-assurance-form" onSubmit={onSubmit}>
-        <div className="risk-assurance-form-grid">
+        <FormGrid columns={2} gap="compact" collapseAt="narrow">
           <FormField label="Stable ID">
             <input
               value={draft.stableId}
@@ -1582,11 +1582,11 @@ function AssuranceNodeDialog({
           <FormField label="Valid to">
             <input type="datetime-local" value={draft.validTo} onChange={(event) => update({ validTo: event.target.value })} />
           </FormField>
-        </div>
+        </FormGrid>
         <FormField label="Description">
           <textarea value={draft.description} onChange={(event) => update({ description: event.target.value })} rows={4} maxLength={20000} />
         </FormField>
-        <div className="risk-assurance-form-grid">
+        <FormGrid columns={2} gap="compact" collapseAt="narrow">
           <FormField label="Legal basis references">
             <textarea value={draft.legalBasisRefs} onChange={(event) => update({ legalBasisRefs: event.target.value })} rows={3} />
           </FormField>
@@ -1596,7 +1596,7 @@ function AssuranceNodeDialog({
           <FormField label="Evidence references">
             <textarea value={draft.evidenceRefs} onChange={(event) => update({ evidenceRefs: event.target.value })} rows={3} />
           </FormField>
-        </div>
+        </FormGrid>
       </form>
     </Dialog>
   );

webui/src/styles/risk-compliance.css

@@ -226,12 +226,6 @@
   gap: 12px;
 }
 
-.risk-assurance-form-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px 12px;
-}
-
 .risk-panel {
   display: flex;
   min-width: 0;
@@ -514,7 +508,6 @@
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .risk-assurance-form-grid,
   .risk-assurance-properties {
     grid-template-columns: minmax(0, 1fr);
   }