Adopt shared WebUI layout primitives

webui/src/features/committee/CommitteePage.tsx

@@ -10,7 +10,7 @@ import {
   Vote
 } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState, type ReactNode } from "react";
-import {
+import { ActionToolbar,
   ActionBlockerHint,
   Button,
   DocumentationHelpLink,
@@ -183,7 +183,7 @@ export default function CommitteePage({ settings, auth }: PlatformRouteContext)
   return (
     <main className="committee-page">
       <div className="committee-shell">
-        <div className="committee-toolbar">
+        <ActionToolbar className="committee-toolbar">
           <form onSubmit={(event) => { event.preventDefault(); void refresh(); }} className="committee-search">
             <Search size={16} aria-hidden="true" />
             <input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Search bodies" aria-label="Search committee bodies" />
@@ -202,7 +202,7 @@ export default function CommitteePage({ settings, auth }: PlatformRouteContext)
             New body
           </Button>
           <DocumentationHelpLink reference={COMMITTEE_DOCUMENTATION} />
-        </div>
+        </ActionToolbar>
 
         {error ? <DismissibleAlert tone="danger" resetKey={error} className="committee-alert">{error}</DismissibleAlert> : null}
         {loading && bodies.length === 0 ? <LoadingIndicator label="Loading committee workspace" /> : null}

webui/src/features/committee/CommitteeRecordDialog.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from "react";
-import {
+import { FormGrid,
   Button,
   ConfirmDialog,
   Dialog,
@@ -176,7 +176,7 @@ export default function CommitteeRecordDialog({
       <div className="committee-record-form">
         <div className="committee-dialog-help"><DocumentationHelpLink reference={COMMITTEE_FIELD_DOCUMENTATION} /></div>
         {error ? <DismissibleAlert tone="danger" resetKey={error}>{error}</DismissibleAlert> : null}
-        <div className="committee-form-grid">
+        <FormGrid columns={2} gap="compact" collapseAt="narrow">
           <FormField label="Title" documentation={COMMITTEE_FIELD_DOCUMENTATION}>
             <input
               value={draft.title}
@@ -194,7 +194,7 @@ export default function CommitteeRecordDialog({
               {stateOptions.map((state) => <option key={state} value={state}>{stateLabel(state)}</option>)}
             </select>
           </FormField>
-        </div>
+        </FormGrid>
 
         {kind === "body" ? (
           <FormField label="Responsible organization unit ID" documentation={COMMITTEE_FIELD_DOCUMENTATION}>
@@ -207,19 +207,19 @@ export default function CommitteeRecordDialog({
         ) : null}
 
         {kind === "meeting" ? (
-          <div className="committee-form-grid">
+          <FormGrid columns={2} gap="compact" collapseAt="narrow">
             <FormField label="Starts">
               <input type="datetime-local" value={draft.startsAt} disabled={busy} onChange={(event) => setDraft({ ...draft, startsAt: event.target.value })} />
             </FormField>
             <FormField label="Ends">
               <input type="datetime-local" value={draft.endsAt} disabled={busy} onChange={(event) => setDraft({ ...draft, endsAt: event.target.value })} />
             </FormField>
-          </div>
+          </FormGrid>
         ) : null}
 
         {kind === "agenda_item" ? (
           <>
-            <div className="committee-form-grid committee-form-grid-three">
+            <FormGrid columns={3} gap="compact" collapseAt="narrow">
               <FormField label="Position">
                 <input type="number" min="1" value={draft.position} disabled={busy} onChange={(event) => setDraft({ ...draft, position: event.target.value })} />
               </FormField>
@@ -234,7 +234,7 @@ export default function CommitteeRecordDialog({
               <FormField label="Subject ID">
                 <input value={draft.subjectId} disabled={busy} onChange={(event) => setDraft({ ...draft, subjectId: event.target.value })} />
               </FormField>
-            </div>
+            </FormGrid>
             {draft.state === "decided" ? (
               <FormField label="Formal Decision ID" documentation={COMMITTEE_FIELD_DOCUMENTATION}>
                 <input value={draft.decisionId} disabled={busy} onChange={(event) => setDraft({ ...draft, decisionId: event.target.value })} />
@@ -245,7 +245,7 @@ export default function CommitteeRecordDialog({
 
         {kind === "vote" ? (
           <>
-            <div className="committee-form-grid committee-form-grid-three">
+            <FormGrid columns={3} gap="compact" collapseAt="narrow">
               <FormField label="Method">
                 <select value={draft.method} disabled={busy} onChange={(event) => setDraft({ ...draft, method: event.target.value })}>
                   <option value="recorded">Recorded</option>
@@ -259,7 +259,7 @@ export default function CommitteeRecordDialog({
               <FormField label="Ballot provider (optional)" documentation={COMMITTEE_FIELD_DOCUMENTATION}>
                 <input value={draft.providerId} disabled={busy} onChange={(event) => setDraft({ ...draft, providerId: event.target.value })} />
               </FormField>
-            </div>
+            </FormGrid>
             <FormField label="Voting ballot ID (optional)" documentation={COMMITTEE_FIELD_DOCUMENTATION}>
               <input value={draft.votingBallotId} disabled={busy} onChange={(event) => setDraft({ ...draft, votingBallotId: event.target.value })} />
             </FormField>
@@ -268,7 +268,7 @@ export default function CommitteeRecordDialog({
             </FormField>
             {draft.state === "closed" ? (
               <div className="committee-vote-result-fields">
-                <div className="committee-form-grid">
+                <FormGrid columns={2} gap="compact" collapseAt="narrow">
                   <FormField label="Votes cast">
                     <input type="number" min="0" value={draft.castCount} disabled={busy} onChange={(event) => setDraft({ ...draft, castCount: event.target.value })} />
                   </FormField>
@@ -278,7 +278,7 @@ export default function CommitteeRecordDialog({
                       <option value="not-met">Not met</option>
                     </select>
                   </FormField>
-                </div>
+                </FormGrid>
                 <div className="committee-count-grid">
                   {choices.map((choice) => (
                     <FormField key={choice} label={`${choice} votes`}>
@@ -344,14 +344,14 @@ export default function CommitteeRecordDialog({
 
 function EvidenceFields({ draft, busy, setDraft }: { draft: Draft; busy: boolean; setDraft: (draft: Draft) => void }) {
   return (
-    <div className="committee-form-grid">
+    <FormGrid columns={2} gap="compact" collapseAt="narrow">
       <FormField label="Approval ID" documentation={COMMITTEE_FIELD_DOCUMENTATION}>
         <input value={draft.approvalId} disabled={busy} onChange={(event) => setDraft({ ...draft, approvalId: event.target.value })} />
       </FormField>
       <FormField label="Evidence record ID" documentation={COMMITTEE_FIELD_DOCUMENTATION}>
         <input value={draft.evidenceId} disabled={busy} onChange={(event) => setDraft({ ...draft, evidenceId: event.target.value })} />
       </FormField>
-    </div>
+    </FormGrid>
   );
 }
 

webui/src/styles/committee.css

@@ -268,17 +268,11 @@
   justify-content: flex-end;
 }
 
-.committee-form-grid,
 .committee-count-grid {
   display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 10px;
 }
 
-.committee-form-grid-three {
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-}
-
 .committee-count-grid {
   grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
 }
@@ -328,8 +322,4 @@
     grid-row: 1 / span 2;
   }
 
-  .committee-form-grid,
-  .committee-form-grid-three {
-    grid-template-columns: 1fr;
-  }
 }