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

---
 .../src/features/postbox/PostboxAdminPanel.tsx | 18 +++++++++---------
 webui/src/features/postbox/PostboxPage.tsx     | 10 +++++-----
 webui/src/styles/postbox.css                   | 15 ---------------
 3 files changed, 14 insertions(+), 29 deletions(-)

diff --git a/webui/src/features/postbox/PostboxAdminPanel.tsx b/webui/src/features/postbox/PostboxAdminPanel.tsx
index e79688a..497086e 100644
--- a/webui/src/features/postbox/PostboxAdminPanel.tsx
+++ b/webui/src/features/postbox/PostboxAdminPanel.tsx
@@ -12,7 +12,7 @@ import {
   Save,
   Trash2
 } from "lucide-react";
-import {
+import { FormGrid,
   ActionBlockerHint,
   AdminPageLayout,
   Button,
@@ -990,7 +990,7 @@ function TemplateDialog({
         </div>
       }
     >
-      <div className="postbox-form-grid two-columns">
+      <FormGrid columns={2} gap="small" collapseAt="narrow" className="postbox-form-grid">
         <FormField label="Name" documentation={POSTBOX_FIELD_DOCUMENTATION}>
           <input
             value={draft.name}
@@ -1157,7 +1157,7 @@ function TemplateDialog({
             />
           </div>
           {linkedCopy.enabled ? (
-            <div className="postbox-form-grid two-columns">
+            <FormGrid columns={2} gap="small" collapseAt="narrow" className="postbox-form-grid">
               <FormField label="Organization structure" documentation={POSTBOX_FIELD_DOCUMENTATION}>
                 <select
                   value={linkedCopy.structure_id || ""}
@@ -1344,10 +1344,10 @@ function TemplateDialog({
                   />
                 </FormField>
               ) : <div />}
-            </div>
+            </FormGrid>
           ) : null}
         </div>
-      </div>
+      </FormGrid>
       {preview ? <TemplateImpactPreview preview={preview} /> : null}
       <p className="postbox-form-note">
         Available pattern variables include template, unit, function, and optional context names or slugs. Published revisions are immutable.
@@ -1444,7 +1444,7 @@ function ExactPostboxDialog({
         </div>
       }
     >
-      <div className="postbox-form-grid two-columns">
+      <FormGrid columns={2} gap="small" collapseAt="narrow" className="postbox-form-grid">
         <FormField label="Name" documentation={POSTBOX_FIELD_DOCUMENTATION}>
           <input value={draft.name} onChange={(event) => onChange({ ...draft, name: event.target.value })} />
         </FormField>
@@ -1491,7 +1491,7 @@ function ExactPostboxDialog({
             onChange={(checked) => onChange({ ...draft, portal_visible: checked })}
           />
         </div>
-      </div>
+      </FormGrid>
     </Dialog>
   );
 }
@@ -1541,7 +1541,7 @@ function MaterializeDialog({
         </div>
       }
     >
-      <div className="postbox-form-grid">
+      <FormGrid gap="small" className="postbox-form-grid">
         <FormField label="Organization unit" documentation={POSTBOX_FIELD_DOCUMENTATION}>
           <select
             value={draft.organization_unit_id}
@@ -1571,7 +1571,7 @@ function MaterializeDialog({
         <FormField label="Optional case or service context" documentation={POSTBOX_FIELD_DOCUMENTATION}>
           <input value={draft.context_key} onChange={(event) => onChange({ ...draft, context_key: event.target.value })} />
         </FormField>
-      </div>
+      </FormGrid>
     </Dialog>
   );
 }
diff --git a/webui/src/features/postbox/PostboxPage.tsx b/webui/src/features/postbox/PostboxPage.tsx
index dfc5ddb..1436bbb 100644
--- a/webui/src/features/postbox/PostboxPage.tsx
+++ b/webui/src/features/postbox/PostboxPage.tsx
@@ -18,7 +18,7 @@ import {
   UserRoundCheck,
   X
 } from "lucide-react";
-import {
+import { FormGrid,
   ActionBlockerHint,
   Button,
   ConfirmDialog,
@@ -938,7 +938,7 @@ export default function PostboxPage({
           </div>
         }
       >
-        <div className="postbox-form-grid">
+        <FormGrid gap="small" className="postbox-form-grid">
           <FormField label="Name" documentation={POSTBOX_FIELD_DOCUMENTATION}>
             <input
               value={groupingDraft.name}
@@ -962,7 +962,7 @@ export default function PostboxPage({
               }
             />
           </div>
-        </div>
+        </FormGrid>
         <fieldset className="postbox-source-selector">
           <legend>Source postboxes</legend>
           {postboxes.map((postbox) => (
@@ -1014,7 +1014,7 @@ export default function PostboxPage({
           </div>
         }
       >
-        <div className="postbox-compose-grid">
+        <FormGrid columns={2} gap="small" collapseAt="narrow" className="postbox-compose-grid">
           <FormField label="Postbox" documentation={POSTBOX_FIELD_DOCUMENTATION}>
             <select
               value={messageDraft.postbox_id}
@@ -1099,7 +1099,7 @@ export default function PostboxPage({
               />
             </FormField>
           </div>
-        </div>
+        </FormGrid>
       </Dialog>
 
       <ConfirmDialog
diff --git a/webui/src/styles/postbox.css b/webui/src/styles/postbox.css
index 26a4179..f0df88a 100644
--- a/webui/src/styles/postbox.css
+++ b/webui/src/styles/postbox.css
@@ -420,15 +420,6 @@
   width: min(900px, calc(100vw - 32px));
 }
 
-.postbox-form-grid {
-  display: grid;
-  gap: 14px;
-}
-
-.postbox-form-grid.two-columns {
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-}
-
 .postbox-form-grid input,
 .postbox-form-grid select {
   width: 100%;
@@ -600,9 +591,7 @@
 }
 
 .postbox-compose-grid {
-  display: grid;
   grid-template-columns: minmax(0, 2fr) minmax(160px, 1fr);
-  gap: 12px;
 }
 
 .postbox-compose-wide {
@@ -755,7 +744,6 @@
 }
 
 @media (max-width: 640px) {
-  .postbox-form-grid.two-columns,
   .postbox-provenance dl,
   .postbox-admin-properties {
     grid-template-columns: 1fr;
@@ -770,7 +758,4 @@
     flex-direction: column;
   }
 
-  .postbox-compose-grid {
-    grid-template-columns: 1fr;
-  }
 }