Adopt shared WebUI layout primitives

webui/src/features/voting/VotingBallotDialog.tsx

@@ -1,6 +1,6 @@
 import { Plus, Trash2 } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
-import {
+import { FormGrid,
   Button,
   Dialog,
   DocumentationHelpLink,
@@ -128,7 +128,7 @@ export default function VotingBallotDialog({
       <div className="voting-ballot-editor">
         <div className="voting-editor-help"><DocumentationHelpLink reference={VOTING_FIELD_DOCUMENTATION} /></div>
         {error && <DismissibleAlert tone="danger" resetKey={error}>{error}</DismissibleAlert>}
-        <div className="voting-editor-grid">
+      <FormGrid columns={2} gap="compact" collapseAt="workspace">
           <FormField label="Title"><input value={draft.title} disabled={busy} onChange={(event) => setDraft({ ...draft, title: event.target.value })} /></FormField>
           <FormField label="Method">
             <select value={draft.method} disabled={busy} onChange={(event) => setDraft({ ...draft, method: event.target.value as VotingBallotDraft["method"] })}>
@@ -175,7 +175,7 @@ export default function VotingBallotDialog({
               />
             </FormField>
           </>}
-        </div>
+        </FormGrid>
 
         <EditorHeading title="Options" onAdd={() => setDraft({ ...draft, options: [...draft.options, { key: `option-${draft.options.length + 1}`, label: "", description: "" }] })} disabled={busy} />
         <div className="voting-editor-list">

webui/src/features/voting/VotingPage.tsx

@@ -1,6 +1,6 @@
 import { CheckCircle2, Pencil, Plus, RefreshCw, ShieldCheck, XCircle } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import {
+import { ActionToolbar,
   ActionBlockerHint,
   Button,
   ConfirmDialog,
@@ -146,11 +146,11 @@ export default function VotingPage({ settings, auth }: PlatformRouteContext) {
     <main className="voting-page">
       <div className="voting-shell">
         <aside className="voting-catalogue">
-          <div className="voting-toolbar">
+          <ActionToolbar className="voting-toolbar">
             <IconButton label="Refresh ballots" icon={<RefreshCw size={16} />} disabled={loading || busy} disabledReason={loading ? VOTING_I18N.loading : busy ? VOTING_I18N.busy : undefined} onClick={() => void loadList()} />
             <Button variant="primary" disabled={!canManage} disabledReason={!canManage ? VOTING_I18N.manageReason : undefined} onClick={() => setEditing("new")}><Plus size={16} aria-hidden="true" />New ballot</Button>
             <DocumentationHelpLink reference={VOTING_DOCUMENTATION} />
-          </div>
+          </ActionToolbar>
           <PageScrollViewport className="voting-list-viewport">
             {loading && <LoadingIndicator label="Loading ballots" />}
             {!loading && items.length === 0 && <div className="voting-empty">No ballots.</div>}

webui/src/styles/voting.css

@@ -223,12 +223,6 @@
   justify-content: flex-end;
 }
 
-.voting-editor-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px;
-}
-
 .voting-editor-wide {
   grid-column: 1 / -1;
 }
@@ -274,7 +268,6 @@
   }
 
   .voting-metrics,
-  .voting-editor-grid,
   .voting-option-row,
   .voting-elector-row {
     grid-template-columns: 1fr;