Adopt shared WebUI layout primitives

webui/src/features/campaigns/MailSettingsPage.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import {
+import { FormGrid,
   Button,
   Card,
   Dialog,
@@ -375,7 +375,7 @@ export default function MailSettingsPage({ settings, campaignId, view = "setting
               <Button variant="primary" onClick={openCredentialDialog} disabled={locked || profilesLoading || !selectedProfile || !selectedSmtpServer && !selectedImapServer}>Add campaign credential</Button>
             </div>}>
             <p className="muted small-note">The campaign stores stable references to the envelope, selected servers, and credentials.</p>
-            <div className="form-grid compact responsive-form-grid">
+            <FormGrid columns={2} collapseAt="wide" className="">
               <FormField label="i18n:govoplan-campaign.profile.ff4fc027">
                 <select value={selectedProfileId} disabled={locked || profilesLoading} onChange={(event) => selectMailProfile(event.target.value)}>
                   <option value="">i18n:govoplan-campaign.select_a_mail_profile.76480af0</option>
@@ -410,7 +410,7 @@ export default function MailSettingsPage({ settings, campaignId, view = "setting
                   )}
                 </select>
               </FormField>
-            </div>
+            </FormGrid>
             {selectedProfileUnavailable && <DismissibleAlert tone="warning" dismissible={false}>i18n:govoplan-campaign.the_referenced_mail_profile_is_inactive_unavaila.abeebe26</DismissibleAlert>}
             {selectedProfile && <div className="metric-grid inside">
               <MetricCard label="i18n:govoplan-campaign.profile.ff4fc027" value={selectedProfile.name} />
@@ -427,12 +427,12 @@ export default function MailSettingsPage({ settings, campaignId, view = "setting
             {profileError && <DismissibleAlert tone="warning" resetKey={profileError} floating>{profileError}</DismissibleAlert>}
           </Card>}
 
-          <Dialog
+          <Dialog variant="administration" size="wide"
             open={credentialDialogOpen}
             title="Add campaign credential"
             onClose={() => setCredentialDialogOpen(false)}
             closeDisabled={credentialSaving}
-            className="admin-dialog admin-dialog-wide adaptive-config-dialog"
+            className="adaptive-config-dialog"
             footerClassName="button-row compact-actions"
             footer={
               <>
@@ -459,7 +459,7 @@ export default function MailSettingsPage({ settings, campaignId, view = "setting
                   <h3>Campaign login</h3>
                   <p>This credential belongs to this campaign and can use only the selected mail servers.</p>
                 </header>
-                <div className="form-grid two">
+                <FormGrid columns={2} collapseAt="standard" className="">
                   <FormField label="Name">
                     <input value={credentialDraft.name} disabled={credentialSaving} onChange={(event) => setCredentialDraft({ ...credentialDraft, name: event.target.value })} autoFocus />
                   </FormField>
@@ -469,17 +469,17 @@ export default function MailSettingsPage({ settings, campaignId, view = "setting
                   <FormField label="Password">
                     <PasswordField value={credentialDraft.password} onValueChange={(password) => setCredentialDraft({ ...credentialDraft, password })} disabled={credentialSaving} generator autoComplete="new-password" />
                   </FormField>
-                </div>
-                <div className="form-grid two">
+                </FormGrid>
+                <FormGrid columns={2} collapseAt="standard" className="">
                   {selectedSmtpServer && <ToggleSwitch checked={credentialDraft.useSmtp} disabled={credentialSaving} onChange={(useSmtp) => setCredentialDraft({ ...credentialDraft, useSmtp })} label={`Use for SMTP: ${selectedSmtpServer.name}`} />}
                   {selectedImapServer && <ToggleSwitch checked={credentialDraft.useImap} disabled={credentialSaving} onChange={(useImap) => setCredentialDraft({ ...credentialDraft, useImap })} label={`Use for IMAP: ${selectedImapServer.name}`} />}
-                </div>
+                </FormGrid>
               </section>
             </div>
           </Dialog>
 
           {!isPolicyView && <Card title="i18n:govoplan-campaign.imap_append.8c0d9e96" collapsible>
-            <div className="form-grid compact responsive-form-grid mail-server-form-grid">
+            <FormGrid columns={2} collapseAt="wide" className="mail-server-form-grid">
               <div className="mail-server-field-span mail-server-toggle-row mail-server-plain-toggle-row">
                 <ToggleSwitch
                   label="i18n:govoplan-campaign.append_successful_messages_to_sent_via_imap.dbd1b1d8"
@@ -499,7 +499,7 @@ export default function MailSettingsPage({ settings, campaignId, view = "setting
                 </div>
               </FormField>
               <MailServerFolderLookupResultView result={folderResult} disabled={locked || !imapAppendEnabled} onUseDetected={useDetectedSentFolder} floatingFailures />
-            </div>
+            </FormGrid>
           </Card>}
         </>
       </LoadingFrame>