From 4ec5d560556fd10cad743519a564a309b0203cc1 Mon Sep 17 00:00:00 2001
From: Albrecht Degering <albrecht@degering.name>
Date: Tue, 18 Aug 2026 10:42:54 +0200
Subject: [PATCH] Adopt shared WebUI layout primitives

---
 webui/src/features/tasks/TasksPage.tsx | 14 +++++++-------
 webui/src/styles/tasks.css             |  5 +----
 2 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/webui/src/features/tasks/TasksPage.tsx b/webui/src/features/tasks/TasksPage.tsx
index d8f0434..be673e9 100644
--- a/webui/src/features/tasks/TasksPage.tsx
+++ b/webui/src/features/tasks/TasksPage.tsx
@@ -12,7 +12,7 @@ import {
   XCircle
 } from "lucide-react";
 import { Link } from "react-router";
-import {
+import { FormGrid, ToolbarGroup,
   AdminIconButton,
   Button,
   DateTimeField,
@@ -125,7 +125,7 @@ export default function TasksPage({ settings, auth }: { settings: ApiSettings; a
         <aside className="tasks-sidebar">
           <div className="tasks-sidebar-bar">
             <span className="tasks-title"><ListChecks size={18} /><strong>i18n:govoplan-tasks.work</strong></span>
-            <span className="tasks-toolbar-actions">
+            <ToolbarGroup align="end" className="tasks-toolbar-actions">
               <AdminIconButton
                 label="i18n:govoplan-tasks.refresh"
                 icon={<RefreshCw size={16} aria-hidden="true" />}
@@ -141,7 +141,7 @@ export default function TasksPage({ settings, auth }: { settings: ApiSettings; a
                   helpContextId="tasks.action.create"
                 />
               ) : null}
-            </span>
+            </ToolbarGroup>
           </div>
           <form className="tasks-search" onSubmit={submitSearch} role="search">
             <Search size={15} aria-hidden="true" />
@@ -188,10 +188,10 @@ export default function TasksPage({ settings, auth }: { settings: ApiSettings; a
         <section className="tasks-workspace" data-help-context-id="tasks.page.detail">
           <div className="tasks-topbar">
             <span className="tasks-detail-title"><ListChecks size={18} /><strong>{selected?.title ?? "i18n:govoplan-tasks.work_details"}</strong></span>
-            <span className="tasks-toolbar-actions">
+            <ToolbarGroup align="end" className="tasks-toolbar-actions">
               <DocumentationHelpLink reference={DOCUMENTATION} />
               {selected?.provider_id === "tasks.explicit" && canWrite ? <TaskActions item={selected} busy={busy} onAction={(action) => action === "defer" ? setDeferOpen(true) : void runAction(action)} /> : null}
-            </span>
+            </ToolbarGroup>
           </div>
 
           {error ? <DismissibleAlert tone="danger" compact resetKey={error}>{error}</DismissibleAlert> : null}
@@ -323,10 +323,10 @@ function CreateTaskDialog({ open, busy, settings, auth, onClose, onCreated, onEr
       <form id="tasks-create-form" className="tasks-create-form" onSubmit={submit}>
         <FormField label="i18n:govoplan-tasks.title"><input value={title} onChange={(event) => setTitle(event.target.value)} maxLength={500} autoFocus required /></FormField>
         <FormField label="i18n:govoplan-tasks.summary"><textarea value={summary} onChange={(event) => setSummary(event.target.value)} maxLength={4000} rows={4} /></FormField>
-        <div className="tasks-create-grid">
+        <FormGrid columns={2} gap="small" collapseAt="workspace" className="tasks-create-grid">
           <FormField label="i18n:govoplan-tasks.priority" helpContextId="tasks.field.priority"><select value={priority} onChange={(event) => setPriority(event.target.value as WorkPriority)}><option value="low">i18n:govoplan-tasks.priority.low</option><option value="normal">i18n:govoplan-tasks.priority.normal</option><option value="high">i18n:govoplan-tasks.priority.high</option><option value="urgent">i18n:govoplan-tasks.priority.urgent</option></select></FormField>
           <FormField label="i18n:govoplan-tasks.due_at" helpContextId="tasks.field.due-at"><DateTimeField value={dueAt} onChange={setDueAt} min={localDateTime(new Date())} /></FormField>
-        </div>
+        </FormGrid>
         <FormField label="i18n:govoplan-tasks.required_action"><input value={requiredAction} onChange={(event) => setRequiredAction(event.target.value)} maxLength={500} /></FormField>
         <p className="tasks-assignment-note">i18n:govoplan-tasks.assigned_to_you</p>
       </form>
diff --git a/webui/src/styles/tasks.css b/webui/src/styles/tasks.css
index db4367e..173ea77 100644
--- a/webui/src/styles/tasks.css
+++ b/webui/src/styles/tasks.css
@@ -259,9 +259,7 @@
 }
 
 .tasks-create-grid {
-  display: grid;
   grid-template-columns: minmax(150px, .75fr) minmax(260px, 1.25fr);
-  gap: 12px;
 }
 
 .tasks-assignment-note {
@@ -285,8 +283,7 @@
     align-items: flex-start;
   }
 
-  .tasks-properties dl,
-  .tasks-create-grid {
+  .tasks-properties dl {
     grid-template-columns: 1fr;
   }
 }