Adopt shared WebUI layout primitives

webui/src/features/forms/FormInstancePage.tsx

@@ -1,7 +1,7 @@
 import { Archive, ArrowLeft, BadgeCheck, ExternalLink, RefreshCw, Save, Send, Trash2 } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { useParams } from "react-router";
-import {
+import { ActionToolbar,
   ActionBlockerHint,
   Button,
   ConfirmDialog,
@@ -311,7 +311,7 @@ export default function FormInstancePage({ settings, auth }: PlatformRouteContex
   return (
     <main className="forms-runtime-page">
       <div className="form-instance-shell">
-        <div className="form-instance-toolbar">
+        <ActionToolbar className="form-instance-toolbar">
           <Button onClick={() => navigate("/forms-runtime")}>
             <ArrowLeft size={16} aria-hidden="true" />
             Forms
@@ -325,7 +325,7 @@ export default function FormInstancePage({ settings, auth }: PlatformRouteContex
             </Button>
           }
           <DocumentationHelpLink reference={FORMS_RUNTIME_DOCUMENTATION} />
-        </div>
+        </ActionToolbar>
         <PageScrollViewport className="form-instance-viewport">
           {error &&
             <DismissibleAlert tone="danger" resetKey={error}>

webui/src/features/forms/FormsRuntimePage.tsx

@@ -1,6 +1,6 @@
 import { Link2, RefreshCw } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
-import {
+import { ActionToolbar,
   Button,
   DocumentationHelpLink,
   DismissibleAlert,
@@ -58,7 +58,7 @@ export default function FormsRuntimePage({ settings, auth }: PlatformRouteContex
   return (
     <main className="forms-runtime-page">
       <div className="forms-runtime-shell">
-        <div className="forms-runtime-toolbar">
+        <ActionToolbar className="forms-runtime-toolbar">
           <Button onClick={() => void load()} disabled={loading} disabledReason={loading ? FORMS_RUNTIME_I18N.loading : undefined}>
             <RefreshCw size={16} aria-hidden="true" />
             Refresh
@@ -85,7 +85,7 @@ export default function FormsRuntimePage({ settings, auth }: PlatformRouteContex
           </label>
           <span className="forms-runtime-count">{i18nMessage("i18n:govoplan-forms-runtime.form_count", { total })}</span>
           <DocumentationHelpLink reference={FORMS_RUNTIME_DOCUMENTATION} />
-        </div>
+        </ActionToolbar>
         <PageScrollViewport className="forms-runtime-list-viewport">
           {error &&
             <DismissibleAlert tone="danger" resetKey={error}>

webui/src/features/forms/IntakeProfilesDialog.tsx

@@ -1,6 +1,6 @@
 import { Copy, Link, Plus, Send } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import {
+import { FormGrid,
   Button,
   Dialog,
   DismissibleAlert,
@@ -152,7 +152,7 @@ export default function IntakeProfilesDialog({ open, settings, onClose }: Intake
         <>
           <section className="form-intake-create">
             <h3>Add intake profile</h3>
-            <div className="form-intake-create-grid">
+            <FormGrid columns={3} gap="small" collapseAt="workspace" className="form-intake-create-grid">
               <label>
                 <span>Published Form</span>
                 <select value={definitionId} onChange={(event) => setDefinitionId(event.target.value)} disabled={Boolean(busyKey)}>
@@ -190,7 +190,7 @@ export default function IntakeProfilesDialog({ open, settings, onClose }: Intake
                 <Plus size={16} aria-hidden="true" />
                 Add profile
               </Button>
-            </div>
+            </FormGrid>
           </section>
           <section className="form-intake-profiles">
             <h3>Configured profiles</h3>

webui/src/features/forms/PublicFormPage.tsx

@@ -1,7 +1,7 @@
 import { Save, Send, Trash2 } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
 import { useParams } from "react-router";
-import {
+import { ActionToolbar,
   ActionBlockerHint,
   Button,
   ConfirmDialog,
@@ -215,10 +215,10 @@ export default function PublicFormPage({ settings }: PlatformRouteContext) {
   return (
     <main className="forms-runtime-page forms-public-page">
       <div className="form-instance-shell">
-        <div className="form-instance-toolbar">
+        <ActionToolbar className="form-instance-toolbar">
           <strong>{localized.title || "Form"}</strong>
           {instance && <StatusBadge status={editable ? "active" : "inactive"} label={stateLabel(instance.status)} />}
-        </div>
+        </ActionToolbar>
         <PageScrollViewport className="form-instance-viewport">
           {error && <DismissibleAlert tone="danger" resetKey={error}>{error}</DismissibleAlert>}
           {loading && <LoadingIndicator label="Loading Form" />}

webui/src/styles/forms-runtime.css

@@ -351,10 +351,7 @@
 }
 
 .form-intake-create-grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
   align-items: end;
-  gap: 12px;
 }
 
 .form-intake-create-grid label {
@@ -580,7 +577,6 @@
     flex-direction: column;
   }
 
-  .form-intake-create-grid,
   .form-intake-profile-row {
     grid-template-columns: 1fr;
   }