feat(ui): modernise application tracking and right context

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

@@ -491,7 +491,7 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
         </Box>
       ) : null}
       {isMobile ? (
-        <Paper variant="outlined" sx={{ mt: 2, p: 1.25, borderRadius: 2.5, boxShadow: "none" }}>
+        <Box sx={{ mt: 2, pb: 2, borderBottom: 1, borderColor: "divider", minWidth: 0 }}>
           <Stack spacing={1.1}>
             <TextField
               label={t("jobTableSearch")}
@@ -572,9 +572,9 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
             </Box>
             {!boardView ? densityControl : null}
           </Stack>
-        </Paper>
+        </Box>
       ) : (
-        <Paper variant="outlined" sx={{ display: "flex", gap: 1.5, alignItems: "center", mt: 2, p: 1.5, flexWrap: "wrap", borderRadius: 2.5, boxShadow: "none" }}>
+        <Box sx={{ display: "flex", gap: 1.5, alignItems: "center", mt: 2, pb: 2, flexWrap: "wrap", borderBottom: 1, borderColor: "divider", minWidth: 0 }}>
           <TextField
             label={t("jobTableSearch")}
             value={search}
@@ -627,7 +627,7 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
             {!boardView && !isMobile ? <Tooltip title={t("jobTableColumns")}><IconButton aria-label={t("jobTableColumns")} onClick={(e) => setColumnsAnchor(e.currentTarget)}><ViewColumnIcon /></IconButton></Tooltip> : null}
             {!boardView ? densityControl : null}
           </Box>
-        </Paper>
+        </Box>
       )}
 
       {!boardView && selectedIds.length > 0 ? (
@@ -674,7 +674,7 @@ export default function JobTable({ refreshToken, pageSize, onPageSizeChange, col
         sx={{
           mt: 1.5,
           overflow: "hidden",
-          borderRadius: 2.5,
+          borderRadius: 1,
           border: "1px solid",
           borderColor: "divider",
           boxShadow: "none",