style: polish job details attachments and add job modal

job-tracker-ui/src/App.tsx

@@ -251,6 +251,3 @@ export default function App() {
     </ToastProvider>
   );
 }
-vider>
-  );
-}

job-tracker-ui/src/components/AddJobModal.tsx

@@ -377,11 +377,11 @@ export default function AddJobModal({ open, onClose, onCreated }: Props) {
             <TagsInput value={tags} onChange={setTags} />
           </Box>
 
-          <TextField label="Description (original)" multiline rows={6} value={description} onChange={(e) => setDescription(e.target.value)} sx={{ gridColumn: "1 / -1" }} />
-          <TextField label="Translated description" multiline rows={6} value={translatedDescription} onChange={(e) => setTranslatedDescription(e.target.value)} sx={{ gridColumn: "1 / -1" }} />
+          <TextField label="Description (original)" multiline rows={6} value={description} onChange={(e) => setDescription(e.target.value)} helperText={`${description.length} characters`} sx={{ gridColumn: "1 / -1" }} />
+          <TextField label="Translated description" multiline rows={6} value={translatedDescription} onChange={(e) => setTranslatedDescription(e.target.value)} helperText={`${translatedDescription.length} characters`} sx={{ gridColumn: "1 / -1" }} />
           <TextField label="Description language (optional)" value={descriptionLanguage} onChange={(e) => setDescriptionLanguage(e.target.value)} sx={{ gridColumn: "1 / -1" }} />
-          <TextField label="Notes" multiline rows={3} value={notes} onChange={(e) => setNotes(e.target.value)} sx={{ gridColumn: "1 / -1" }} />
-          <TextField label="Cover letter" multiline rows={6} value={coverLetter} onChange={(e) => setCoverLetter(e.target.value)} sx={{ gridColumn: "1 / -1" }} />
+          <TextField label="Notes" multiline rows={3} value={notes} onChange={(e) => setNotes(e.target.value)} helperText={`${notes.length} characters`} sx={{ gridColumn: "1 / -1" }} />
+          <TextField label="Cover letter" multiline rows={6} value={coverLetter} onChange={(e) => setCoverLetter(e.target.value)} helperText={`${coverLetter.length} characters`} sx={{ gridColumn: "1 / -1" }} />
 
           <Box sx={{ gridColumn: "1 / -1" }}>
             <Typography variant="overline" sx={{ display: "block", mt: 1 }}>Attachments checklist</Typography>
@@ -410,3 +410,12 @@ export default function AddJobModal({ open, onClose, onCreated }: Props) {
     </Dialog>
   );
 }
+veAndAddAnother ? "Save and continue" : "Add job"}
+              </Button>
+            </Box>
+          </Box>
+        </Box>
+      </DialogContent>
+    </Dialog>
+  );
+}

job-tracker-ui/src/components/Attachments.tsx

@@ -169,7 +169,7 @@ export default function Attachments({ jobId }: { jobId: number }) {
         </Button>
       </Box>
 
-      <TableContainer sx={{ borderRadius: 2, border: "1px solid", borderColor: "divider" }}>
+      <TableContainer sx={{ borderRadius: 3, border: "1px solid", borderColor: "divider" }}>
         <Table size="small">
           <TableHead>
             <TableRow>
@@ -253,3 +253,16 @@ export default function Attachments({ jobId }: { jobId: number }) {
     </Box>
   );
 }
+ialogActions>
+          <Button
+            onClick={() => {
+              setPreviewOpen(false);
+            }}
+          >
+            Close
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Box>
+  );
+}

job-tracker-ui/src/components/JobDetailsDialog.tsx

@@ -105,15 +105,23 @@ export default function JobDetailsDialog({ open, jobId, onClose }: Props) {
 
   return (
     <Dialog open={open} onClose={onClose} fullWidth maxWidth="md">
-      <DialogTitle>
+      <DialogTitle sx={{ pb: 1 }}>
         <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, flexWrap: "wrap" }}>
+          <Box>
+            <Typography variant="overline" sx={{ color: "text.secondary" }}>Job workspace</Typography>
             <Typography variant="h6">{title}</Typography>
+          </Box>
           {job && <Chip label={job.status} color={statusChipColor(job.status)} size="small" />}
         </Box>
       </DialogTitle>
 
       <DialogContent>
         <JobFlowBar job={job} history={history} />
+        <Box sx={{ mt: 1.5, mb: 2, p: 1.5, borderRadius: 3, border: "1px solid", borderColor: "divider", backgroundColor: "background.paper" }}>
+          <Typography variant="body2" sx={{ color: "text.secondary" }}>
+            {job?.fullSummary ?? job?.shortSummary ?? "Track company context, communication, files, and next steps in one place."}
+          </Typography>
+        </Box>
         <Tabs value={tab} onChange={(_, v) => setTab(v)} sx={{ mb: 2 }}>
           <Tab label="Overview" />
           <Tab label="Correspondence" />