refactor(webui): use central form layout

webui/src/features/IdmPage.tsx

@@ -12,6 +12,8 @@ import {
   LoadingFrame,
   PageTitle,
   StatusBadge,
+  TableActionGroup,
+  ToggleSwitch,
   hasScope,
   useUnsavedDraftGuard,
   type ApiSettings,
@@ -559,14 +561,10 @@ export default function IdmPage({ settings, auth }: IdmPageProps) {
     },
     {
       id: "actions",
-      header: "",
-      width: 88,
+      header: "Actions",
+      width: 72,
       sticky: "end",
-      render: (row) => (
-        <div className="idm-row-actions">
-          <AdminIconButton label="i18n:govoplan-idm.edit.a5a0f3cc" icon={<Edit3 size={16} aria-hidden="true" />} disabled={!canManage || busy} onClick={() => editAssignment(row)} />
-        </div>
-      )
+      render: (row) => <TableActionGroup actions={[{ id: "edit", label: "i18n:govoplan-idm.edit.a5a0f3cc", icon: <Edit3 size={16} aria-hidden="true" />, disabled: !canManage || busy, onClick: () => editAssignment(row) }]} />
     }
   ];
 
@@ -592,17 +590,9 @@ export default function IdmPage({ settings, auth }: IdmPageProps) {
         <div className="idm-table-stack">
           {canReadSettings && (
               <Card title="i18n:govoplan-idm.idm_governance.6e4f3251" collapsible collapseKey="idm.governance">
-                <form className="idm-form-grid" onSubmit={(event) => { event.preventDefault(); void submitSettings(); }}>
+                <form className="admin-form-grid two-columns" onSubmit={(event) => { event.preventDefault(); void submitSettings(); }}>
                 <div className="idm-check-list wide">
-                  <label>
-                    <input
-                      type="checkbox"
-                      checked={settingsDraft.require_assignment_change_requests}
-                      disabled={!canManageSettings || busy}
-                      onChange={(event) => setSettingsDraft({ ...settingsDraft, require_assignment_change_requests: event.target.checked })}
-                    />
-                    <span>i18n:govoplan-idm.require_assignment_change_requests.697718a1</span>
-                  </label>
+                  <ToggleSwitch label="i18n:govoplan-idm.require_assignment_change_requests.697718a1" checked={settingsDraft.require_assignment_change_requests} disabled={!canManageSettings || busy} onChange={(require_assignment_change_requests) => setSettingsDraft({ ...settingsDraft, require_assignment_change_requests })} />
                 </div>
                 <FormField label="i18n:govoplan-idm.audit_detail_level.eb2e6fd2">
                   <select
@@ -624,7 +614,7 @@ export default function IdmPage({ settings, auth }: IdmPageProps) {
                     onChange={(event) => setSettingsDraft({ ...settingsDraft, change_retention_days: event.target.value })}
                   />
                 </FormField>
-                <div className="idm-form-actions wide">
+                <div className="button-row compact-actions wide">
                   <Button type="submit" variant="primary" disabled={!canManageSettings || busy || !hasDirtySettingsDraft}>
                     i18n:govoplan-idm.save_settings.4602c430
                   </Button>
@@ -668,7 +658,7 @@ export default function IdmPage({ settings, auth }: IdmPageProps) {
           </>
         )}
       >
-        <form id={formId} className="idm-form-grid" onSubmit={(event) => void submitAssignment(event)}>
+        <form id={formId} className="admin-form-grid two-columns" onSubmit={(event) => void submitAssignment(event)}>
           <FormField label="i18n:govoplan-idm.identity_search.d3460fcf">
             <input
               value={identitySearch}
@@ -731,14 +721,8 @@ export default function IdmPage({ settings, auth }: IdmPageProps) {
             </>
           )}
           <div className="idm-check-list">
-            <label>
-              <input type="checkbox" checked={assignmentDraft.applies_to_subunits} disabled={!canManage || busy} onChange={(event) => setAssignmentDraft({ ...assignmentDraft, applies_to_subunits: event.target.checked })} />
-              <span>i18n:govoplan-idm.applies_to_subunits.2e31b50b</span>
-            </label>
-            <label>
-              <input type="checkbox" checked={assignmentDraft.is_active} disabled={!canManage || busy} onChange={(event) => setAssignmentDraft({ ...assignmentDraft, is_active: event.target.checked })} />
-              <span>i18n:govoplan-idm.active.7bd0e9f8</span>
-            </label>
+            <ToggleSwitch label="i18n:govoplan-idm.applies_to_subunits.2e31b50b" checked={assignmentDraft.applies_to_subunits} disabled={!canManage || busy} onChange={(applies_to_subunits) => setAssignmentDraft({ ...assignmentDraft, applies_to_subunits })} />
+            <ToggleSwitch label="i18n:govoplan-idm.active.7bd0e9f8" checked={assignmentDraft.is_active} disabled={!canManage || busy} onChange={(is_active) => setAssignmentDraft({ ...assignmentDraft, is_active })} />
           </div>
           <div className="wide idm-dialog-change-request">
             <FormField label="i18n:govoplan-idm.change_request_id.b7d816db">

webui/src/styles/idm.css

@@ -27,16 +27,6 @@
   width: 100%;
 }
 
-.idm-form-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 14px;
-}
-
-.idm-form-grid .wide {
-  grid-column: 1 / -1;
-}
-
 .idm-check-list {
   display: grid;
   gap: 10px;
@@ -51,18 +41,6 @@
   font-weight: 600;
 }
 
-.idm-form-actions,
-.idm-row-actions {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  flex-wrap: nowrap;
-}
-
-.idm-row-actions {
-  justify-content: flex-end;
-}
-
 .idm-identity {
   display: grid;
   gap: 2px;
@@ -90,7 +68,7 @@
 }
 
 @media (max-width: 900px) {
-  .idm-form-grid {
+  .idm-page .admin-form-grid.two-columns {
     grid-template-columns: 1fr;
   }
 }