Adopt shared WebUI layout primitives

webui/src/features/FunctionAssignmentChangesPanel.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState, type FormEvent } from "react";
 import { Check, Eye, Plus, RotateCcw, Undo2, X } from "lucide-react";
-import {
+import { FormLayout,
   AdminIconButton,
   ApiError,
   Button,
@@ -360,15 +360,15 @@ export default function FunctionAssignmentChangesPanel({ settings, auth, model,
         </LoadingFrame>
       </Card>
 
-      <Dialog
+      <Dialog variant="administration" size="wide"
         open={createOpen}
         title="Start governed function change"
-        className="admin-dialog admin-dialog-wide idm-change-dialog"
+        className="idm-change-dialog"
         onClose={closeCreate}
         closeDisabled={busy}
         footer={<><Button type="button" onClick={closeCreate} disabled={busy} disabledReason={idmDisabledReason(false, busy)}>Cancel</Button><Button type="submit" form="idm-change-create" variant="primary" disabled={busy || !draft.functionId || !draft.identityId || !draft.justification.trim()} disabledReason={idmDisabledReason(false, busy) ?? ((!draft.functionId || !draft.identityId || !draft.justification.trim()) ? IDM_INTERFACE_I18N.incomplete : undefined)}>Submit</Button></>}
       >
-        <form id="idm-change-create" className="admin-form-grid two-columns" onSubmit={(event) => void submit(event)}>
+        <FormLayout columns={2} gap="small" collapseAt="workspace" id="idm-change-create" className="" onSubmit={(event) => void submit(event)}>
           <div className="wide">
             <SegmentedControl
               ariaLabel="Function change kind"
@@ -414,10 +414,10 @@ export default function FunctionAssignmentChangesPanel({ settings, auth, model,
               <textarea rows={3} value={draft.evidence} onChange={(event) => setDraft((current) => ({ ...current, evidence: event.target.value }))} disabled={busy} />
             </FormField>
           </div>
-        </form>
+        </FormLayout>
       </Dialog>
 
-      <Dialog
+      <Dialog variant="administration" size="wide"
         open={detailOpen && selected !== null}
         title={selected
           ? i18nMessage(
@@ -427,7 +427,7 @@ export default function FunctionAssignmentChangesPanel({ settings, auth, model,
               { function: functionById.get(selected.function_id)?.name ?? selected.function_id }
             )
           : "Function change"}
-        className="admin-dialog admin-dialog-wide idm-change-dialog"
+        className="idm-change-dialog"
         onClose={() => !busy && setDetailOpen(false)}
         closeDisabled={busy}
         footer={<Button type="button" onClick={() => setDetailOpen(false)} disabled={busy} disabledReason={idmDisabledReason(false, busy)}>Close</Button>}

webui/src/features/IdmPage.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useRef, useState, type FormEvent } from "react";
 import { Edit3, Plus, RefreshCw } from "lucide-react";
-import {
+import { FormLayout, ActionToolbar,
   ActionBlockerHint,
   AdminIconButton,
   ApiError,
@@ -624,7 +624,7 @@ export default function IdmPage({ settings, auth }: IdmPageProps) {
           <PageTitle loading={loading}>i18n:govoplan-idm.idm.61f4a7a2</PageTitle>
           <p>i18n:govoplan-idm.identity_links_intro.45fed9dd</p>
         </div>
-        <div className="idm-toolbar">
+        <ActionToolbar className="idm-toolbar">
           <DocumentationHelpLink reference={IDM_DOCUMENTATION} />
           <Button
             type="button"
@@ -635,7 +635,7 @@ export default function IdmPage({ settings, auth }: IdmPageProps) {
           >
             <RefreshCw size={16} aria-hidden="true" /> i18n:govoplan-idm.reload.870ca3ec
           </Button>
-        </div>
+        </ActionToolbar>
       </div>
 
       {error && <DismissibleAlert tone="danger" resetKey={error} floating>{error}</DismissibleAlert>}
@@ -682,7 +682,7 @@ export default function IdmPage({ settings, auth }: IdmPageProps) {
                 collapseKey="idm.governance"
                 actions={<DocumentationHelpLink reference={IDM_GOVERNANCE_DOCUMENTATION} />}
               >
-                <form className="admin-form-grid two-columns" onSubmit={(event) => { event.preventDefault(); void submitSettings(); }}>
+                <FormLayout columns={2} gap="small" collapseAt="workspace" className="" onSubmit={(event) => { event.preventDefault(); void submitSettings(); }}>
                 <div className="idm-check-list wide">
                   <ToggleSwitch label="i18n:govoplan-idm.require_assignment_change_requests.697718a1" checked={settingsDraft.require_assignment_change_requests} disabled={!canManageSettings || busy} help={idmDisabledReason(false, busy, canManageSettings)} onChange={(require_assignment_change_requests) => setSettingsDraft({ ...settingsDraft, require_assignment_change_requests })} />
                 </div>
@@ -716,7 +716,7 @@ export default function IdmPage({ settings, auth }: IdmPageProps) {
                     i18n:govoplan-idm.save_settings.4602c430
                   </Button>
                 </div>
-                </form>
+                </FormLayout>
               </Card>
             )}
 
@@ -748,12 +748,12 @@ export default function IdmPage({ settings, auth }: IdmPageProps) {
   function renderAssignmentDialog() {
     const formId = "idm-assignment-editor";
     return (
-      <Dialog
+      <Dialog variant="administration" size="wide"
         open={assignmentEditorOpen}
         title={editingAssignmentId ? "i18n:govoplan-idm.update_assignment.e20f52aa" : "i18n:govoplan-idm.add_assignment.08f2a0d5"}
         onClose={closeAssignmentEditor}
         closeDisabled={busy}
-        className="admin-dialog admin-dialog-wide idm-editor-dialog"
+        className="idm-editor-dialog"
         footer={(
           <>
             <Button type="button" onClick={closeAssignmentEditor} disabled={busy} disabledReason={idmDisabledReason(false, busy)}>i18n:govoplan-idm.cancel_edit.ea4781e0</Button>
@@ -769,7 +769,7 @@ export default function IdmPage({ settings, auth }: IdmPageProps) {
           </>
         )}
       >
-        <form id={formId} className="admin-form-grid two-columns" onSubmit={(event) => void submitAssignment(event)}>
+        <FormLayout columns={2} gap="small" collapseAt="workspace" id={formId} className="" onSubmit={(event) => void submitAssignment(event)}>
           <FormField label="i18n:govoplan-idm.identity_search.d3460fcf" documentation={IDM_FIELD_DOCUMENTATION}>
             <input
               value={identitySearch}
@@ -886,7 +886,7 @@ export default function IdmPage({ settings, auth }: IdmPageProps) {
           {identityLoading && <p className="idm-muted wide">i18n:govoplan-idm.loading_identities.f3b84693</p>}
           {actingForLoading && <p className="idm-muted wide">i18n:govoplan-idm.loading_acting_for_accounts.c9894b1e</p>}
           {!model.functions.length && <p className="idm-muted wide">i18n:govoplan-idm.no_functions_available.51ba08eb</p>}
-        </form>
+        </FormLayout>
       </Dialog>
     );
   }