style(applications): flatten edit dialog sections

2026-11-11 13:05:05 +01:00
parent 89c553cb96
commit 7bfebe88bf
2 changed files with 24 additions and 19 deletions
@@ -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();
@@ -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>