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

---
 webui/src/features/cases/CaseDecisionDialog.tsx | 6 +++---
 webui/src/features/cases/CaseDetailPage.tsx     | 6 +++---
 webui/src/features/cases/CasesPage.tsx          | 6 +++---
 webui/src/styles/cases.css                      | 6 ------
 4 files changed, 9 insertions(+), 15 deletions(-)

diff --git a/webui/src/features/cases/CaseDecisionDialog.tsx b/webui/src/features/cases/CaseDecisionDialog.tsx
index b2634c8..13f290e 100644
--- a/webui/src/features/cases/CaseDecisionDialog.tsx
+++ b/webui/src/features/cases/CaseDecisionDialog.tsx
@@ -1,6 +1,6 @@
 import { Scale } from "lucide-react";
 import { useEffect, useMemo, useRef, useState } from "react";
-import {
+import { FormGrid,
   Button,
   ConfirmDialog,
   Dialog,
@@ -125,7 +125,7 @@ export default function CaseDecisionDialog({
           <p className="case-decision-explanation">
             The server verifies your current acting assignment, the effective Mandate, the exact Case revision, evidence, and legal basis before recording the outcome.
           </p>
-          <div className="case-decision-grid">
+          <FormGrid columns={2} gap="small" collapseAt="workspace" className="case-decision-grid">
             <FormField label="Decision type" documentation={CASES_FIELDS_DOCUMENTATION}>
               <input
                 value={decisionType}
@@ -142,7 +142,7 @@ export default function CaseDecisionDialog({
                 onChange={(event) => setEffectiveAt(event.target.value)}
               />
             </FormField>
-          </div>
+          </FormGrid>
           <FormField label="Operative result" documentation={CASES_FIELDS_DOCUMENTATION}>
             <textarea
               rows={4}
diff --git a/webui/src/features/cases/CaseDetailPage.tsx b/webui/src/features/cases/CaseDetailPage.tsx
index a3b6f50..13ab089 100644
--- a/webui/src/features/cases/CaseDetailPage.tsx
+++ b/webui/src/features/cases/CaseDetailPage.tsx
@@ -1,7 +1,7 @@
 import { Archive, ArrowLeft, Save, Scale, Share2 } from "lucide-react";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useParams } from "react-router";
-import {
+import { ActionToolbar,
   ActionBlockerHint,
   Button,
   DocumentationHelpLink,
@@ -181,7 +181,7 @@ export default function CaseDetailPage({ settings, auth }: PlatformRouteContext)
   return (
     <main className="cases-page">
       <div className="case-detail-shell">
-        <div className="case-detail-toolbar">
+        <ActionToolbar className="case-detail-toolbar">
           <button type="button" className="btn btn-ghost" onClick={() => navigate("/cases")}>
             <ArrowLeft size={16} aria-hidden="true" />
             Cases
@@ -215,7 +215,7 @@ export default function CaseDetailPage({ settings, auth }: PlatformRouteContext)
             </div>
           ) : null}
           <DocumentationHelpLink reference={CASES_DOCUMENTATION} />
-        </div>
+        </ActionToolbar>
         <PageScrollViewport className="case-detail-viewport">
           {error &&
             <DismissibleAlert tone="danger" resetKey={error}>
diff --git a/webui/src/features/cases/CasesPage.tsx b/webui/src/features/cases/CasesPage.tsx
index fbd3e10..f2dc80e 100644
--- a/webui/src/features/cases/CasesPage.tsx
+++ b/webui/src/features/cases/CasesPage.tsx
@@ -1,6 +1,6 @@
 import { Search } from "lucide-react";
 import { useEffect, useMemo, useState, type FormEvent } from "react";
-import {
+import { ActionToolbar,
   Button,
   DocumentationHelpLink,
   DismissibleAlert,
@@ -74,7 +74,7 @@ export default function CasesPage({ settings }: PlatformRouteContext) {
   return (
     <main className="cases-page">
       <div className="cases-shell">
-        <div className="cases-toolbar">
+        <ActionToolbar className="cases-toolbar">
           <form className="cases-search" onSubmit={submit}>
             <Search size={17} aria-hidden="true" />
             <input
@@ -102,7 +102,7 @@ export default function CasesPage({ settings }: PlatformRouteContext) {
           </label>
           <span className="cases-count">{i18nMessage("i18n:govoplan-cases.case_count", { value0: total })}</span>
           <DocumentationHelpLink reference={CASES_DOCUMENTATION} />
-        </div>
+        </ActionToolbar>
         <PageScrollViewport className="cases-list-viewport">
           {error &&
             <DismissibleAlert tone="error" onDismiss={() => setError("")}>
diff --git a/webui/src/styles/cases.css b/webui/src/styles/cases.css
index c588338..0bbecda 100644
--- a/webui/src/styles/cases.css
+++ b/webui/src/styles/cases.css
@@ -288,9 +288,7 @@
 }
 
 .case-decision-grid {
-  display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(210px, 0.7fr);
-  gap: 12px;
 }
 
 .case-decision-content textarea {
@@ -433,10 +431,6 @@
     flex-wrap: wrap;
   }
 
-  .case-decision-grid {
-    grid-template-columns: 1fr;
-  }
-
   .case-share-add-row .icon-button {
     justify-self: end;
   }