Adopt shared WebUI layout primitives

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}

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}>

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("")}>

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;
   }