Adopt shared WebUI layout primitives

webui/src/features/mail/MailProfileManagement.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState, type ReactNode } from "react";
-import { ActionBlockerHint, AdminSelectionList, ConnectionTree, DocumentationHelpLink, FieldLabel, LoadingFrame, MailServerSettingsPanel, PolicyLockedHint, PolicyPathHelp, PolicyRow, PolicySourcePath, PolicyTable, StageRail, StatusBadge, TableActionGroup, ToggleSwitch, hasMailImapSettings, mailImapSettingsPayload, mailServerSecurityOptions, mailSmtpSettingsPayload, mailTextOrNull, mailTransportCredentialsPayload, mergeDeltaRows, normalizeMailServerSecurity, normalizePolicySourcePathItems, useDeltaWatermarks, type ConnectionTreeColumn, type MailServerConnectionTestResult, type MailServerCredentialSettings, type MailServerImapSettings, type MailServerSmtpSettings, type NormalizedPolicySourcePathItem, type PolicySourcePathItem } from "@govoplan/core-webui";
+import { FormGrid, ActionBlockerHint, AdminSelectionList, ConnectionTree, DocumentationHelpLink, FieldLabel, LoadingFrame, MailServerSettingsPanel, PolicyLockedHint, PolicyPathHelp, PolicyRow, PolicySourcePath, PolicyTable, StageRail, StatusBadge, TableActionGroup, ToggleSwitch, hasMailImapSettings, mailImapSettingsPayload, mailServerSecurityOptions, mailSmtpSettingsPayload, mailTextOrNull, mailTransportCredentialsPayload, mergeDeltaRows, normalizeMailServerSecurity, normalizePolicySourcePathItems, useDeltaWatermarks, type ConnectionTreeColumn, type MailServerConnectionTestResult, type MailServerCredentialSettings, type MailServerImapSettings, type MailServerSmtpSettings, type NormalizedPolicySourcePathItem, type PolicySourcePathItem } from "@govoplan/core-webui";
 import { ArrowLeft, ArrowRight, Inbox, KeyRound, Link2, Pencil, Plus, Send, Settings2, Trash2, Unlink } from "lucide-react";
 import type { ApiSettings } from "../../types";
 import {
@@ -740,11 +740,11 @@ export function MailProfileScopeManager({
       {error && <DismissibleAlert tone="danger" resetKey={error} floating>{error}</DismissibleAlert>}
       {success && <DismissibleAlert tone="success" resetKey={success} floating>{success}</DismissibleAlert>}
 
-      <Dialog
+      <Dialog variant="administration" size="wide"
         open={editing !== null}
         title={profileDialogTitle(editing, editingTarget)}
         onClose={() => !busy && closeProfileEditor()}
-        className="admin-dialog admin-dialog-wide mail-profile-dialog"
+        className="mail-profile-dialog"
         closeDisabled={busy}
         footer={editing === "new"
           ? <>
@@ -1343,7 +1343,7 @@ function ProfileForm({
         documentation={MAIL_PROFILE_DOCUMENTATION} />
       }
       {showProfileFields &&
-      <div className="admin-form-grid two-columns">
+      <FormGrid columns={2} gap="small" collapseAt="workspace" className="">
         <FormField label="i18n:govoplan-mail.name.709a2322" documentation={MAIL_PROFILE_DOCUMENTATION}><input value={draft.name} disabled={disabled} onChange={(event) => setDraft({ ...draft, name: event.target.value })} /></FormField>
         <FormField label="i18n:govoplan-mail.slug.094da9b9"><input value={draft.slug} disabled={disabled} onChange={(event) => setDraft({ ...draft, slug: event.target.value })} placeholder="i18n:govoplan-mail.generated_from_name.33d69a91" /></FormField>
         <FormField label="i18n:govoplan-mail.status.bae7d5be"><select value={draft.isActive ? "active" : "inactive"} disabled={disabled} onChange={(event) => setDraft({ ...draft, isActive: event.target.value === "active" })}><option value="active">i18n:govoplan-mail.active.a733b809</option><option value="inactive">i18n:govoplan-mail.inactive.09af574c</option></select></FormField>
@@ -1355,7 +1355,7 @@ function ProfileForm({
             onChange={(checked) => setDraft({ ...draft, inheritToLowerScopes: checked })}
             label="Visible to lower scopes" />
         </div>
-      </div>
+      </FormGrid>
       }
 
       {editTarget.kind === "profile" && existingProfile &&
@@ -1363,7 +1363,7 @@ function ProfileForm({
       }
 
       {editTarget.kind === "server" &&
-      <div className="admin-form-grid two-columns">
+      <FormGrid columns={2} gap="small" collapseAt="workspace" className="">
         <FormField label="Server name" documentation={MAIL_PROFILE_DOCUMENTATION}>
           <input value={draft.serverName} disabled={disabled} onChange={(event) => setDraft({ ...draft, serverName: event.target.value })} />
         </FormField>
@@ -1387,11 +1387,11 @@ function ProfileForm({
             onChange={(checked) => setDraft({ ...draft, serverInheritToLowerScopes: checked })}
             label="Visible to lower scopes" />
         </div>
-      </div>
+      </FormGrid>
       }
 
       {editTarget.kind === "credentials" &&
-      <div className="admin-form-grid two-columns">
+      <FormGrid columns={2} gap="small" collapseAt="workspace" className="">
         {creatingCredential &&
         <FormField label="Reusable credential" documentation={MAIL_PROFILE_WORKFLOW_DOCUMENTATION}>
           <select value={reuseCredentialId} disabled={credentialDisabled} onChange={(event) => setReuseCredentialId(event.target.value)}>
@@ -1455,7 +1455,7 @@ function ProfileForm({
           The selected credential remains independently managed and will be linked to this server.
         </div>
         }
-      </div>
+      </FormGrid>
       }
 
       {policyMessages.length > 0 && (