Adopt shared WebUI layout primitives

webui/src/features/organizations/OrganizationsPage.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,
@@ -1004,7 +1004,7 @@ export default function OrganizationsPage({
               <PageTitle loading={loading}>{title}</PageTitle>
               <p>{description}</p>
             </div>
-            <div className="organizations-toolbar">
+            <ActionToolbar className="organizations-toolbar">
               <DocumentationHelpLink reference={ORGANIZATIONS_DOCUMENTATION} />
               <Button
                 type="button"
@@ -1015,7 +1015,7 @@ export default function OrganizationsPage({
               >
                 <RefreshCw size={16} aria-hidden="true" /> i18n:govoplan-organizations.reload.cce71553
               </Button>
-            </div>
+            </ActionToolbar>
           </div>
 
           {error && <DismissibleAlert tone="danger" resetKey={error} floating>{error}</DismissibleAlert>}
@@ -1086,9 +1086,9 @@ export default function OrganizationsPage({
     return (
       <div className="organizations-table-stack">
         <Card title="i18n:govoplan-organizations.organization_tree.e5bfb195" actions={<AdminIconButton label="i18n:govoplan-organizations.add_root_unit.1ef8a9f5" icon={<Plus size={16} aria-hidden="true" />} variant="primary" disabled={!canWriteUnits || busy} disabledReason={organizationWriteReason(canWriteUnits, busy, "unit")} onClick={() => openUnitCreate()} />}>
-          <div className="explorer-tree-toolbar">
+          <ActionToolbar className="explorer-tree-toolbar">
             {selectedUnitId && <Button type="button" variant="ghost" disabled={busy} disabledReason={busy ? ORGANIZATIONS_INTERFACE_I18N.busy : undefined} onClick={() => setSelectedUnitId("")}>i18n:govoplan-organizations.none.334c4a4c</Button>}
-          </div>
+          </ActionToolbar>
           {model.units.length ? (
             <ExplorerTree
               nodes={unitsByParentId.get("") ?? []}
@@ -1215,7 +1215,7 @@ export default function OrganizationsPage({
       activeEditor === "functionType" ? submitFunctionType :
       submitFunction;
     return (
-      <Dialog
+      <Dialog variant="administration" size="wide"
         open={Boolean(activeEditor)}
         title={editorTitle()}
         onClose={() => {
@@ -1224,7 +1224,7 @@ export default function OrganizationsPage({
           else discardDrafts();
         }}
         closeDisabled={busy}
-        className="admin-dialog admin-dialog-wide organizations-editor-dialog"
+        className="organizations-editor-dialog"
         footer={(
           <>
             <Button
@@ -1250,9 +1250,9 @@ export default function OrganizationsPage({
         <div className="button-row organizations-dialog-help">
           <DocumentationHelpLink reference={ORGANIZATIONS_FIELD_DOCUMENTATION} />
         </div>
-        <form id={formId} className="admin-form-grid two-columns" onSubmit={(event) => void submit(event)}>
+        <FormLayout columns={2} gap="small" collapseAt="workspace" id={formId} className="" onSubmit={(event) => void submit(event)}>
           {renderEditorFields()}
-        </form>
+        </FormLayout>
       </Dialog>
     );
   }