Adopt shared WebUI layout primitives

webui/src/features/campaigns/components/PostboxTargetsDialog.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useState } from "react";
-import { Button, Dialog, DismissibleAlert, FormField, TableActionGroup, ToggleSwitch } from "@govoplan/core-webui";
+import { FormGrid, ActionToolbar, Button, Dialog, DismissibleAlert, FormField, TableActionGroup, ToggleSwitch } from "@govoplan/core-webui";
 import { ArrowDown, ArrowUp, Plus, Trash2 } from "lucide-react";
 import type {
   CampaignPostboxCatalog,
@@ -101,7 +101,7 @@ export default function PostboxTargetsDialog({
         </>
       }
     >
-      <div className="campaign-postbox-target-toolbar">
+      <ActionToolbar className="campaign-postbox-target-toolbar">
         {showMerge &&
           <ToggleSwitch
             label="Postbox target defaults"
@@ -121,7 +121,7 @@ export default function PostboxTargetsDialog({
           <Plus aria-hidden="true" />
           Add target
         </Button>
-      </div>
+      </ActionToolbar>
 
       {error && <DismissibleAlert tone="danger" dismissible={false}>{error}</DismissibleAlert>}
       {draftTargets.length === 0 &&
@@ -181,7 +181,7 @@ function PostboxTargetRow({
           { id: "remove", label: "Remove target", icon: <Trash2 aria-hidden="true" />, disabled: locked, variant: "danger", onClick: onRemove }
         ]} />
       </div>
-      <div className="form-grid compact responsive-form-grid campaign-postbox-target-grid">
+      <FormGrid columns={2} collapseAt="wide" className="campaign-postbox-target-grid">
         <FormField label="Target type">
           <select
             value={target.mode}
@@ -219,7 +219,7 @@ function PostboxTargetRow({
             onChange={onChange}
           />
         }
-      </div>
+      </FormGrid>
     </section>
   );
 }