From 7bfebe88bff238cf5f4c21bca90d3e7ac6a023d1 Mon Sep 17 00:00:00 2001
From: cesnimda <connor.babbington@cesnimda.co.uk>
Date: Wed, 11 Nov 2026 13:05:05 +0100
Subject: [PATCH] style(applications): flatten edit dialog sections

---
 .../scripts/verify-job-date-widgets.mjs       | 10 +++++-
 .../src/components/EditJobDialog.tsx          | 33 +++++++++----------
 2 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/job-tracker-ui/scripts/verify-job-date-widgets.mjs b/job-tracker-ui/scripts/verify-job-date-widgets.mjs
index 9305cdbc..d6ed7739 100644
--- a/job-tracker-ui/scripts/verify-job-date-widgets.mjs
+++ b/job-tracker-ui/scripts/verify-job-date-widgets.mjs
@@ -8,7 +8,8 @@ import ts from 'typescript';
 
 const compiled = ts.transpileModule(fs.readFileSync(new URL('../src/i18n/translations.ts', import.meta.url), 'utf8'), { compilerOptions: { module: ts.ModuleKind.ESNext } }).outputText;
 const { translations } = await import(`data:text/javascript;base64,${Buffer.from(compiled).toString('base64')}`);
-const out = path.resolve(import.meta.dirname, '../../docs/i18n/evidence/date-widgets');
+const out = path.resolve(import.meta.dirname, process.env.A3_EVIDENCE_DIR ?? '../../docs/i18n/evidence/date-widgets');
+const flatEdit = process.env.A3_FLAT_EDIT === '1';
 fs.mkdirSync(out, { recursive: true });
 const report = { journeys: [], captures: [], writes: [], errors: [], unavailableReads: [], blockedExternal: [] };
 const browser = await chromium.launch();
@@ -81,6 +82,12 @@ try {
     const titleId = await initialEdit.getAttribute('aria-labelledby');
     assert.ok(titleId);
     const edit = page.locator(`[role="dialog"][aria-labelledby="${titleId}"]`);
+    if (flatEdit) {
+      await expect(edit.locator('.MuiDialogContent-root .MuiPaper-outlined')).toHaveCount(0);
+      for (const label of [copy.editJobApplicationDetails, copy.editJobStatusUpdate, copy.editJobRoleDetails, copy.editJobAttachmentsChecklist]) {
+        await expect(edit.getByRole('heading', { name: label, exact: true })).toBeVisible();
+      }
+    }
     const deadline = edit.getByRole('group', { name: copy.editJobDeadline, exact: true });
     await assertDay(deadline, 23);
     await edit.getByRole('textbox', { name: copy.editJobJobTitle, exact: true }).fill('Retain teacher draft');
@@ -92,6 +99,7 @@ try {
     await expect(edit.getByRole('textbox', { name: copy.editJobJobTitle, exact: true })).toHaveValue('Retain teacher draft');
     assert.equal(detailReads, reads); assert.equal(writes.length, 0);
     for (const label of [copy.editJobAppliedOn, copy.editJobStatusChangedOn, copy.editJobReplyReceivedOn, copy.editJobFollowUpOn, copy.editJobDeadline]) await choose24(edit.getByRole('group', { name: label, exact: true }), label === copy.editJobDeadline);
+    if (flatEdit) await edit.locator('.MuiDialogContent-root').evaluate(node => { node.scrollTop = 0; });
     await capture('edit');
     await edit.getByRole('button', { name: copy.save, exact: true }).click();
     await expect(edit).toBeHidden();
diff --git a/job-tracker-ui/src/components/EditJobDialog.tsx b/job-tracker-ui/src/components/EditJobDialog.tsx
index 28ba0326..49b5382f 100644
--- a/job-tracker-ui/src/components/EditJobDialog.tsx
+++ b/job-tracker-ui/src/components/EditJobDialog.tsx
@@ -11,7 +11,6 @@ import {
   FormControlLabel,
   Checkbox,
   MenuItem,
-  Paper,
   TextField,
   Typography,
   Chip,
@@ -201,25 +200,23 @@ export default function EditJobDialog({ open, jobId, onClose, onSaved }: Props)
     <Dialog open={open} onClose={() => { if (!saving.current) onClose(); }} fullWidth maxWidth="md">
       <DialogTitle>{t("editJobTitle")}</DialogTitle>
       <DialogContent>
-        <Box sx={{ mt: 1, mb: 2, p: 1.5, borderRadius: 3, border: "none", boxShadow: "0px 1px 2px 0px rgba(15,23,42,0.04), 0px 8px 24px -12px rgba(15,23,42,0.12)", backgroundColor: "background.paper" }}>
-          <Typography variant="body2" sx={{ color: "text.secondary" }}>
-            {t("editJobIntro")}
-          </Typography>
-        </Box>
+        <Typography variant="body2" sx={{ mt: 1, mb: 2, color: "text.secondary" }}>
+          {t("editJobIntro")}
+        </Typography>
 
         <Box sx={{ display: "flex", flexDirection: "column", gap: 2, mt: 1 }}>
-          <Paper variant="outlined" sx={{ p: 2 }}>
-            <Typography variant="overline" sx={{ color: "text.secondary" }}>{t("editJobApplicationDetails")}</Typography>
+          <Box component="section" sx={{ py: 1 }}>
+            <Typography component="h3" variant="overline" sx={{ color: "text.secondary" }}>{t("editJobApplicationDetails")}</Typography>
             <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" }, gap: 2, mt: 1 }}>
               <Autocomplete disabled={loading} options={companies} getOptionLabel={(c) => c.name} value={company} onChange={(_, v) => setCompany(v)} renderInput={(params) => <TextField {...params} label={t("company")} sx={FIELD_SX} />} />
               <TextField disabled={loading} label={t("editJobJobTitle")} value={jobTitle} onChange={(e) => setJobTitle(e.target.value)} sx={FIELD_SX} />
               <DatePicker disabled={loading} label={t("editJobAppliedOn")} value={parsePickerDate(dateApplied)} onChange={(value) => setDateApplied(toPickerIso(value))} slotProps={{ textField: PICKER_TEXT_FIELD_PROPS }} />
               <TextField disabled={loading} label={t("addJobModalJobUrl")} value={jobUrl} onChange={(e) => setJobUrl(e.target.value)} sx={FIELD_SX} />
             </Box>
-          </Paper>
+          </Box>
 
-          <Paper variant="outlined" sx={{ p: 2 }}>
-            <Typography variant="overline" sx={{ color: "text.secondary" }}>{t("editJobStatusUpdate")}</Typography>
+          <Box component="section" sx={{ py: 1 }}>
+            <Typography component="h3" variant="overline" sx={{ color: "text.secondary" }}>{t("editJobStatusUpdate")}</Typography>
             <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr 1fr" }, gap: 2, mt: 1 }}>
               <TextField disabled={loading} select label={t("editJobCurrentStatus")} value={status} onChange={(e) => setStatus(e.target.value)} sx={FIELD_SX}>
                 {PIPELINE_STATUSES.map((s) => <MenuItem key={s} value={s}>{statusLabel(t, s)}</MenuItem>)}
@@ -230,10 +227,10 @@ export default function EditJobDialog({ open, jobId, onClose, onSaved }: Props)
               <TextField disabled={loading} label={t("editJobNextAction")} value={nextAction} onChange={(e) => setNextAction(e.target.value)} sx={FIELD_SX} />
               <DatePicker disabled={loading} label={t("editJobFollowUpOn")} value={parsePickerDate(followUpAt)} onChange={(value) => setFollowUpAt(toPickerIso(value))} slotProps={{ textField: PICKER_TEXT_FIELD_PROPS }} />
             </Box>
-          </Paper>
+          </Box>
 
-          <Paper variant="outlined" sx={{ p: 2 }}>
-            <Typography variant="overline" sx={{ color: "text.secondary" }}>{t("editJobRoleDetails")}</Typography>
+          <Box component="section" sx={{ py: 1 }}>
+            <Typography component="h3" variant="overline" sx={{ color: "text.secondary" }}>{t("editJobRoleDetails")}</Typography>
             <Box sx={{ display: "grid", gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" }, gap: 2, mt: 1 }}>
               <TextField disabled={loading} label={t("location")} value={location} onChange={(e) => setLocation(e.target.value)} sx={FIELD_SX} />
               <TextField disabled={loading} label={t("addJobModalSalary")} value={salary} onChange={(e) => setSalary(e.target.value)} sx={FIELD_SX} />
@@ -254,10 +251,10 @@ export default function EditJobDialog({ open, jobId, onClose, onSaved }: Props)
               <TextField disabled={loading} label={t("editJobTranslatedDescription")} value={translatedDescription} onChange={(e) => setTranslatedDescription(e.target.value)} multiline rows={6} helperText={t("correspondenceCharacters", { count: translatedDescription.length })} sx={{ gridColumn: "1 / -1" }} />
               <TextField disabled={loading} label={t("editJobCoverLetter")} value={coverLetterText} onChange={(e) => setCoverLetterText(e.target.value)} multiline rows={6} helperText={t("correspondenceCharacters", { count: coverLetterText.length })} sx={{ gridColumn: "1 / -1" }} />
             </Box>
-          </Paper>
+          </Box>
 
-          <Paper variant="outlined" sx={{ p: 2 }}>
-            <Typography variant="overline" sx={{ color: "text.secondary" }}>{t("editJobAttachmentsChecklist")}</Typography>
+          <Box component="section" sx={{ py: 1 }}>
+            <Typography component="h3" variant="overline" sx={{ color: "text.secondary" }}>{t("editJobAttachmentsChecklist")}</Typography>
             {/* Derived from actual uploaded attachments (see the Attachments panel) -- not
                 manually editable, so this can never drift from what's really attached. */}
             <Box sx={{ display: "flex", gap: 1, flexWrap: "wrap", mt: 1 }}>
@@ -266,7 +263,7 @@ export default function EditJobDialog({ open, jobId, onClose, onSaved }: Props)
               <Chip size="small" label={hasPortfolio ? t("editJobPortfolioReady") : t("editJobPortfolioOptional")} color={hasPortfolio ? "success" : "default"} variant={hasPortfolio ? "filled" : "outlined"} />
               {hasOtherAttachment && <Chip size="small" label={t("editJobOtherAttachment")} color="success" variant="filled" />}
             </Box>
-          </Paper>
+          </Box>
         </Box>
       </DialogContent>
       <DialogActions>