Adopt shared WebUI layout primitives

webui/src/features/distributionLists/DistributionListsPage.tsx

@@ -14,7 +14,7 @@ import {
   useRef,
   useState
 } from "react";
-import {
+import { DialogSection, ToolbarGroup, FormGrid, ActionToolbar,
   ApiError,
   Button,
   ConfirmDialog,
@@ -531,7 +531,7 @@ export default function DistributionListsPage({ settings, auth }: Props) {
     <main className="dist-lists-page">
       <div className="dist-lists-shell">
         <aside className="dist-lists-sidebar" aria-label="Distribution lists">
-          <div className="dist-lists-sidebar-toolbar">
+          <ActionToolbar className="dist-lists-sidebar-toolbar">
             <strong>Distribution Lists</strong>
             <span>
               <IconButton
@@ -551,7 +551,7 @@ export default function DistributionListsPage({ settings, auth }: Props) {
                 onClick={() => requestDiscard(() => setCreateOpen(true))}
               />
             </span>
-          </div>
+          </ActionToolbar>
           <div className="dist-lists-search">
             <input
               type="search"
@@ -583,12 +583,12 @@ export default function DistributionListsPage({ settings, auth }: Props) {
         </aside>
 
         <section className="dist-lists-workspace">
-          <div className="dist-lists-workspace-toolbar">
+          <ActionToolbar className="dist-lists-workspace-toolbar">
             <span className="dist-lists-current-title">
               <strong>{selected?.name ?? "No distribution list selected"}</strong>
               {selected ? <small>Revision {selected.current_revision} · {selected.scope_type} scope</small> : null}
             </span>
-            <span className="dist-lists-toolbar-actions">
+            <ToolbarGroup align="end" className="dist-lists-toolbar-actions">
               <DocumentationHelpLink reference={DIST_LISTS_DOCUMENTATION} />
               <SegmentedControl<WorkspaceView>
                 ariaLabel="Distribution-list workspace"
@@ -616,8 +616,8 @@ export default function DistributionListsPage({ settings, auth }: Props) {
                 disabledReason={!canWrite ? DIST_LISTS_I18N.writeReason : !selected ? DIST_LISTS_I18N.noSelection : undefined}
                 onClick={() => setDeleteOpen(true)}
               />
-            </span>
-          </div>
+            </ToolbarGroup>
+          </ActionToolbar>
 
           <div className="dist-lists-alerts">
             {error ? <DismissibleAlert tone="danger" resetKey={error}>{error}</DismissibleAlert> : null}
@@ -746,7 +746,7 @@ export default function DistributionListsPage({ settings, auth }: Props) {
           </>
         )}
       >
-        <div className="dist-lists-dialog-form">
+        <DialogSection className="dist-lists-dialog-form">
           <FormField label="Name" documentation={DIST_LISTS_FIELD_DOCUMENTATION}><input autoFocus value={createName} onChange={(event) => setCreateName(event.target.value)} /></FormField>
           <FormField label="Definition type" documentation={DIST_LISTS_FIELD_DOCUMENTATION}>
             <select value={createKind} onChange={(event) => setCreateKind(event.target.value as DefinitionKind)}>
@@ -756,7 +756,7 @@ export default function DistributionListsPage({ settings, auth }: Props) {
               <option value="template">Template (not runnable)</option>
             </select>
           </FormField>
-        </div>
+        </DialogSection>
       </Dialog>
 
       <EntryEditorDialog
@@ -954,7 +954,7 @@ function EntryEditorDialog({
         </>
       )}
     >
-      <div className="dist-lists-dialog-form">
+      <DialogSection className="dist-lists-dialog-form">
         <FormField label="Source type">
           <SegmentedControl<SourceMode>
             value={state.sourceMode}
@@ -1001,7 +1001,7 @@ function EntryEditorDialog({
             ))}
           </div>
         ) : null}
-        <div className="dist-lists-form-grid">
+        <FormGrid columns={2} gap="compact" collapseAt="narrow">
           <FormField label="Mode" documentation={DIST_LISTS_FIELD_DOCUMENTATION}>
             <select value={state.mode} onChange={(event) => onChange({ ...state, mode: event.target.value as EntryMode })}>
               <option value="include">Include</option>
@@ -1071,7 +1071,7 @@ function EntryEditorDialog({
               </FormField>
             </>
           ) : null}
-        </div>
+        </FormGrid>
         <fieldset className="dist-lists-channel-fieldset">
           <legend>Requested channels</legend>
           {(["email", "postal", "internal_mail", "portal"] as DistributionChannel[]).map((channel) => (
@@ -1088,7 +1088,7 @@ function EntryEditorDialog({
             />
           ))}
         </fieldset>
-      </div>
+      </DialogSection>
     </Dialog>
   );
 

webui/src/styles/dist-lists.css

@@ -394,12 +394,6 @@
   max-width: 780px;
 }
 
-.dist-lists-form-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 10px;
-}
-
 .dist-lists-provider-notices {
   display: grid;
   max-height: 150px;
@@ -543,7 +537,6 @@
 
   .dist-lists-definition-fields,
   .dist-lists-preview-inputs,
-  .dist-lists-form-grid,
   .dist-lists-metrics,
   .dist-lists-channel-fieldset,
   .dist-lists-parameter-row {