GovOPlaN/govoplan-risk-compliance
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Adopt shared WebUI layout primitives

Browse Source
This commit is contained in:
zemion
2026-08-18 10:42:54 +02:00
parent 8a50529f71
commit 05e1e246ca
2 changed files with 8 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webui/src/features/riskCompliance/RiskCompliancePage.tsx
+8 -8
View File
@@ -17,7 +17,7 @@ import {
type FormEvent type FormEvent
} from "react"; } from "react";
import { useSearchParams } from "react-router"; import { useSearchParams } from "react-router";
import { import { FormGrid, ActionToolbar, ToolbarSpacer,
ActionBlockerHint, ActionBlockerHint,
Button, Button,
ConfirmDialog, ConfirmDialog,
@@ -247,7 +247,7 @@ export default function RiskCompliancePage({
return ( return (
<main className="risk-page"> <main className="risk-page">
<div className="risk-toolbar"> <ActionToolbar className="risk-toolbar">
<SegmentedControl <SegmentedControl
value={view} value={view}
onChange={setView} 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} /> <DocumentationHelpLink reference={RISK_COMPLIANCE_DOCUMENTATION} />
{loading && <LoadingIndicator size="sm" label="Loading" />} {loading && <LoadingIndicator size="sm" label="Loading" />}
<IconButton <IconButton
@@ -310,7 +310,7 @@ export default function RiskCompliancePage({
disabled={loading || busy} disabled={loading || busy}
disabledReason={loading ? RISK_COMPLIANCE_I18N.loading : busy ? RISK_COMPLIANCE_I18N.busy : undefined} disabledReason={loading ? RISK_COMPLIANCE_I18N.loading : busy ? RISK_COMPLIANCE_I18N.busy : undefined}
/> />
</div> </ActionToolbar>
{(error || notice) && ( {(error || notice) && (
<div className="risk-alerts"> <div className="risk-alerts">
{error && ( {error && (
@@ -1523,7 +1523,7 @@ function AssuranceNodeDialog({
> >
<DocumentationHelpLink reference={RISK_COMPLIANCE_DOCUMENTATION} /> <DocumentationHelpLink reference={RISK_COMPLIANCE_DOCUMENTATION} />
<form id="risk-assurance-node-form" className="risk-assurance-form" onSubmit={onSubmit}> <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"> <FormField label="Stable ID">
<input <input
value={draft.stableId} value={draft.stableId}
@@ -1582,11 +1582,11 @@ function AssuranceNodeDialog({
<FormField label="Valid to"> <FormField label="Valid to">
<input type="datetime-local" value={draft.validTo} onChange={(event) => update({ validTo: event.target.value })} /> <input type="datetime-local" value={draft.validTo} onChange={(event) => update({ validTo: event.target.value })} />
</FormField> </FormField>
</div> </FormGrid>
<FormField label="Description"> <FormField label="Description">
<textarea value={draft.description} onChange={(event) => update({ description: event.target.value })} rows={4} maxLength={20000} /> <textarea value={draft.description} onChange={(event) => update({ description: event.target.value })} rows={4} maxLength={20000} />
</FormField> </FormField>
<div className="risk-assurance-form-grid"> <FormGrid columns={2} gap="compact" collapseAt="narrow">
<FormField label="Legal basis references"> <FormField label="Legal basis references">
<textarea value={draft.legalBasisRefs} onChange={(event) => update({ legalBasisRefs: event.target.value })} rows={3} /> <textarea value={draft.legalBasisRefs} onChange={(event) => update({ legalBasisRefs: event.target.value })} rows={3} />
</FormField> </FormField>
@@ -1596,7 +1596,7 @@ function AssuranceNodeDialog({
<FormField label="Evidence references"> <FormField label="Evidence references">
<textarea value={draft.evidenceRefs} onChange={(event) => update({ evidenceRefs: event.target.value })} rows={3} /> <textarea value={draft.evidenceRefs} onChange={(event) => update({ evidenceRefs: event.target.value })} rows={3} />
</FormField> </FormField>
</div> </FormGrid>
</form> </form>
</Dialog> </Dialog>
); );
webui/src/styles/risk-compliance.css
-7
View File
@@ -226,12 +226,6 @@
gap: 12px; gap: 12px;
} }
.risk-assurance-form-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px 12px;
}
.risk-panel { .risk-panel {
display: flex; display: flex;
min-width: 0; min-width: 0;
@@ -514,7 +508,6 @@
grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-columns: repeat(2, minmax(0, 1fr));
} }
.risk-assurance-form-grid,
.risk-assurance-properties { .risk-assurance-properties {
grid-template-columns: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
} }