From 88b97cef2eb61551c5390d63dcbc18f9d3979593 Mon Sep 17 00:00:00 2001
From: Knacky <knckydev@gmail.com>
Date: Thu, 11 Jun 2026 11:01:09 +0200
Subject: [PATCH] feat(frontend): 2-column layout for EngagementFormPage in
 edit mode

In edit mode with canEditEngagements, wraps [form | C2ConfigCard] in a
lg:grid-cols-2 responsive grid with items-start alignment. Stacks to
single column on screens narrower than lg. In create mode, retains the
existing max-w-2xl single-column layout. No logic changes.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/pages/EngagementFormPage.tsx | 156 ++++++++++++----------
 1 file changed, 82 insertions(+), 74 deletions(-)

diff --git a/frontend/src/pages/EngagementFormPage.tsx b/frontend/src/pages/EngagementFormPage.tsx
index 6fa635c..3047437 100644
--- a/frontend/src/pages/EngagementFormPage.tsx
+++ b/frontend/src/pages/EngagementFormPage.tsx
@@ -124,7 +124,7 @@ export function EngagementFormPage(): JSX.Element {
   const submitting = createMutation.isPending || patchMutation.isPending;
 
   return (
-    <div className="flex flex-col gap-xl max-w-2xl">
+    <div className="flex flex-col gap-xl">
       <header>
         <h1 className="text-[32px] font-medium leading-none">
           {editing ? 'Edit engagement' : 'New engagement'}
@@ -136,91 +136,99 @@ export function EngagementFormPage(): JSX.Element {
         </p>
       </header>
 
-      <form onSubmit={onSubmit} noValidate className="card-product flex flex-col gap-md">
-        <FormField label="Name" htmlFor="eng-name" required error={errors.name}>
-          <TextInput
-            id="eng-name"
-            name="name"
-            value={form.name}
-            onChange={(e) => setForm({ ...form, name: e.target.value })}
-            required
-          />
-        </FormField>
-
-        <FormField label="Description" htmlFor="eng-description">
-          <TextArea
-            id="eng-description"
-            name="description"
-            value={form.description}
-            onChange={(e) => setForm({ ...form, description: e.target.value })}
-          />
-        </FormField>
-
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-md">
-          <FormField
-            label="Start date"
-            htmlFor="eng-start"
-            required
-            error={errors.start_date}
-          >
+      <div
+        className={
+          editing && canEditEngagements
+            ? 'grid grid-cols-1 lg:grid-cols-2 gap-xl items-start'
+            : 'max-w-2xl'
+        }
+      >
+        <form onSubmit={onSubmit} noValidate className="card-product flex flex-col gap-md">
+          <FormField label="Name" htmlFor="eng-name" required error={errors.name}>
             <TextInput
-              id="eng-start"
-              type="date"
-              name="start_date"
-              value={form.start_date}
-              onChange={(e) => setForm({ ...form, start_date: e.target.value })}
+              id="eng-name"
+              name="name"
+              value={form.name}
+              onChange={(e) => setForm({ ...form, name: e.target.value })}
               required
             />
           </FormField>
 
-          <FormField
-            label="End date"
-            htmlFor="eng-end"
-            hint="Leave empty to clear / leave open-ended"
-            error={errors.end_date}
-          >
-            <TextInput
-              id="eng-end"
-              type="date"
-              name="end_date"
-              value={form.end_date}
-              onChange={(e) => setForm({ ...form, end_date: e.target.value })}
+          <FormField label="Description" htmlFor="eng-description">
+            <TextArea
+              id="eng-description"
+              name="description"
+              value={form.description}
+              onChange={(e) => setForm({ ...form, description: e.target.value })}
             />
           </FormField>
-        </div>
 
-        <FormField label="Status" htmlFor="eng-status" required>
-          <Select
-            id="eng-status"
-            name="status"
-            value={form.status}
-            onChange={(e) => setForm({ ...form, status: e.target.value as EngagementStatus })}
-            options={STATUS_OPTIONS}
-          />
-        </FormField>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-md">
+            <FormField
+              label="Start date"
+              htmlFor="eng-start"
+              required
+              error={errors.start_date}
+            >
+              <TextInput
+                id="eng-start"
+                type="date"
+                name="start_date"
+                value={form.start_date}
+                onChange={(e) => setForm({ ...form, start_date: e.target.value })}
+                required
+              />
+            </FormField>
 
-        {submitError ? (
-          <div role="alert" className="text-[14px] text-bloom-deep">
-            {submitError}
+            <FormField
+              label="End date"
+              htmlFor="eng-end"
+              hint="Leave empty to clear / leave open-ended"
+              error={errors.end_date}
+            >
+              <TextInput
+                id="eng-end"
+                type="date"
+                name="end_date"
+                value={form.end_date}
+                onChange={(e) => setForm({ ...form, end_date: e.target.value })}
+              />
+            </FormField>
           </div>
-        ) : null}
 
-        <div className="flex items-center gap-md pt-sm">
-          <button type="submit" className="btn-primary" disabled={submitting}>
-            {submitting ? 'Saving…' : editing ? 'Save changes' : 'Create engagement'}
-          </button>
-          <Link
-            to={editing && numericId ? `/engagements/${numericId}` : '/engagements'}
-            className="btn-outline-ink"
-          >
-            Cancel
-          </Link>
-        </div>
-      </form>
+          <FormField label="Status" htmlFor="eng-status" required>
+            <Select
+              id="eng-status"
+              name="status"
+              value={form.status}
+              onChange={(e) => setForm({ ...form, status: e.target.value as EngagementStatus })}
+              options={STATUS_OPTIONS}
+            />
+          </FormField>
 
-      {editing && numericId && canEditEngagements && (
-        <C2ConfigCard engagementId={numericId} />
-      )}
+          {submitError ? (
+            <div role="alert" className="text-[14px] text-bloom-deep">
+              {submitError}
+            </div>
+          ) : null}
+
+          <div className="flex items-center gap-md pt-sm">
+            <button type="submit" className="btn-primary" disabled={submitting}>
+              {submitting ? 'Saving…' : editing ? 'Save changes' : 'Create engagement'}
+            </button>
+            <Link
+              to={editing && numericId ? `/engagements/${numericId}` : '/engagements'}
+              className="btn-outline-ink"
+            >
+              Cancel
+            </Link>
+          </div>
+        </form>
+
+        {editing && numericId && canEditEngagements && (
+          <C2ConfigCard engagementId={numericId} />
+        )}
+      </div>
     </div>
   );
 }