Add shared WebUI layout primitives

webui/src/features/auth/LoginModal.tsx

@@ -1,3 +1,4 @@
+import { FormLayout } from "../../components/ContentGrid";
 import { useId, useState } from "react";
 import type { ApiSettings, LoginResponse } from "../../types";
 import { login } from "../../api/auth";
@@ -53,7 +54,7 @@ export default function LoginModal({
         </>
       }>
       
-      <form id={formId} className="form-grid" onSubmit={submit}>
+      <FormLayout columns={1} collapseAt="standard" id={formId} className="" onSubmit={submit}>
         {message && <DismissibleAlert tone="info" dismissible={false}>{message}</DismissibleAlert>}
         {error && <DismissibleAlert tone="danger" resetKey={error}>{error}</DismissibleAlert>}
         <FormField label="i18n:govoplan-core.email.84add5b2">
@@ -62,7 +63,7 @@ export default function LoginModal({
         <FormField label="i18n:govoplan-core.password.8be3c943">
           <PasswordField value={password} autoComplete="current-password" onValueChange={setPassword} />
         </FormField>
-      </form>
+      </FormLayout>
     </Dialog>);
 
 }

webui/src/features/dashboard/DashboardPage.tsx

@@ -1,3 +1,4 @@
+import ContentGrid from "../../components/ContentGrid";
 import Card from "../../components/Card";
 import MetricCard from "../../components/MetricCard";
 import PageLayout from "../../components/PageLayout";
@@ -17,7 +18,7 @@ export default function DashboardPage() {
         <MetricCard label="Dashboard module" value="not installed" tone="neutral" detail="Core fallback is active." />
       </div>
 
-      <div className="dashboard-grid">
+      <ContentGrid columns={2} collapseAt="workspace" className="">
         <Card title="i18n:govoplan-core.installed_modules.32b3e799">
           {modules.length === 0 ? <p className="muted">i18n:govoplan-core.no_feature_modules_are_active.e9c2d936</p> :
           <dl className="detail-list">
@@ -33,7 +34,7 @@ export default function DashboardPage() {
         <Card title="Home">
           <p className="muted">This minimal core home is only shown while no dashboard WebUI module is available. Feature modules own their pages and can expose dashboard widgets once the dashboard module is installed.</p>
         </Card>
-      </div>
+      </ContentGrid>
     </PageLayout>);
 
 }

webui/src/features/settings/SettingsPage.tsx

@@ -1,3 +1,4 @@
+import ContentGrid, { FormGrid } from "../../components/ContentGrid";
 import { useEffect, useMemo, useState } from "react";
 import { useSearchParams } from "react-router";
 import type { ApiSettings, AuthInfo, AuthUpdate, FilesConnectorsUiCapability, MailProfilesUiCapability, SettingsSectionContribution, SettingsSectionsUiCapability, UserUiPreferences, UserUiTheme } from "../../types";
@@ -317,9 +318,9 @@ export default function SettingsPage({
           </div>
 
           {active === "profile" &&
-          <div className="dashboard-grid settings-dashboard-grid">
+          <ContentGrid columns={2} collapseAt="workspace" className="">
               <Card title="i18n:govoplan-core.my_profile.2f3df0a9">
-                <div className="form-grid">
+                <FormGrid columns={1} collapseAt="standard" className="">
                   <FormField label="i18n:govoplan-core.account_display_name.03ed8fc5" help="i18n:govoplan-core.this_global_name_is_shown_in_the_title_bar_and_f.1d46240e">
                     <input value={profileName} onChange={(event) => setProfileName(event.target.value)} placeholder={auth.user.email} />
                   </FormField>
@@ -340,7 +341,7 @@ export default function SettingsPage({
                     </Button>
                   </div>
                   {profileResult && <DismissibleAlert tone={profileResultTone} resetKey={profileResult} floating>{profileResult}</DismissibleAlert>}
-                </div>
+                </FormGrid>
               </Card>
               <Card title="i18n:govoplan-core.account_context.5bb0a918">
                 <dl className="detail-list compact-detail-list">
@@ -351,7 +352,7 @@ export default function SettingsPage({
                 </dl>
                 <p className="muted small-note">i18n:govoplan-core.email_changes_and_password_management_require_de.f7443b69</p>
               </Card>
-            </div>
+            </ContentGrid>
           }
 
           {active === "mail-profiles" && MailProfileScopeManager &&
@@ -393,9 +394,9 @@ export default function SettingsPage({
           }
 
           {active === "interface" &&
-          <div className="dashboard-grid settings-dashboard-grid">
+          <ContentGrid columns={2} collapseAt="workspace" className="">
               <Card title="i18n:govoplan-core.interface_preferences.b82b39a7">
-                <div className="form-grid">
+                <FormGrid columns={1} collapseAt="standard" className="">
                   <ToggleSwitch
                   label="i18n:govoplan-core.compact_tables.c755d9ee"
                   help="i18n:govoplan-core.prepared_ui_preference_for_denser_tables_the_cur.45698d83"
@@ -425,10 +426,10 @@ export default function SettingsPage({
                     </Button>
                   </div>
                   {uiResult && <DismissibleAlert tone={uiResultTone} resetKey={uiResult} floating>{uiResult}</DismissibleAlert>}
-                </div>
+                </FormGrid>
               </Card>
               <Card title="i18n:govoplan-core.theme_and_language.60a8cf59">
-                <div className="form-grid">
+                <FormGrid columns={1} collapseAt="standard" className="">
                   <FormField label="i18n:govoplan-core.language.89b86ab0">
                     <select value={language} onChange={(event) => setLanguage(event.target.value)} disabled={selectableLanguages.length <= 1}>
                       {selectableLanguages.map((item) =>
@@ -455,15 +456,15 @@ export default function SettingsPage({
                     <div><dt>i18n:govoplan-core.available.7c62a142</dt><dd>{availableLanguages.map((item) => item.code.toUpperCase()).join(", ")}</dd></div>
                     <div><dt>i18n:govoplan-core.density.f9160c22</dt><dd>{compactTables ? "i18n:govoplan-core.compact_preview.3e06901d" : "i18n:govoplan-core.comfortable.2313707a"}</dd></div>
                   </dl>
-                </div>
+                </FormGrid>
               </Card>
-            </div>
+            </ContentGrid>
           }
 
           {active === "workspace" &&
-          <div className="dashboard-grid settings-dashboard-grid">
+          <ContentGrid columns={2} collapseAt="workspace" className="">
               <Card title="i18n:govoplan-core.campaign_workspace.c345580f">
-                <div className="form-grid">
+                <FormGrid columns={1} collapseAt="standard" className="">
                   <ToggleSwitch
                   label="i18n:govoplan-core.sticky_section_sidebars.399c92d4"
                   help="i18n:govoplan-core.keeps_campaign_and_admin_section_navigation_in_v.f3602938"
@@ -488,7 +489,7 @@ export default function SettingsPage({
                     </Button>
                   </div>
                   {uiResult && <DismissibleAlert tone={uiResultTone} resetKey={uiResult} floating>{uiResult}</DismissibleAlert>}
-                </div>
+                </FormGrid>
               </Card>
               <Card title="i18n:govoplan-core.editor_behavior.99581bc1">
                 <div className="placeholder-stack">
@@ -498,13 +499,13 @@ export default function SettingsPage({
                   <span>i18n:govoplan-core.template_placeholder_chips_and_preview_overlays.11634d55</span>
                 </div>
               </Card>
-            </div>
+            </ContentGrid>
           }
 
           {active === "local-connection" &&
-          <div className="dashboard-grid settings-dashboard-grid">
+          <ContentGrid columns={2} collapseAt="workspace" className="">
               <Card title="i18n:govoplan-core.local_api_connection.bfb02921">
-                <div className="form-grid">
+                <FormGrid columns={1} collapseAt="standard" className="">
                   <FormField label="i18n:govoplan-core.api_base_url.1358fba4" help="i18n:govoplan-core.leave_empty_to_use_the_same_origin_in_vite_dev_a.9a1c25d7">
                     <input value={settings.apiBaseUrl} onChange={(e) => onSettingsChange({ ...settings, apiBaseUrl: e.target.value })} placeholder="https://example.org or empty" />
                   </FormField>
@@ -526,7 +527,7 @@ export default function SettingsPage({
                     </Button>
                   </div>
                   {testResult && <DismissibleAlert tone={testResultTone} resetKey={testResult} floating>{testResult}</DismissibleAlert>}
-                </div>
+                </FormGrid>
               </Card>
               <Card title="i18n:govoplan-core.session_state.b7a3d0f4">
                 <dl className="detail-list compact-detail-list">
@@ -536,7 +537,7 @@ export default function SettingsPage({
                 </dl>
                 <p className="muted small-note">i18n:govoplan-core.tenant_user_mail_server_and_policy_administratio.2f551271</p>
               </Card>
-            </div>
+            </ContentGrid>
           }
 
           {activeContributedSection &&