feat(ui): establish table and list density contract

job-tracker-ui/src/theme.ts

@@ -2,6 +2,8 @@ import { alpha, createTheme, darken, lighten } from "@mui/material/styles";
 
 type PaletteLike = Record<string, any>;
 
+export type ContentDensity = "comfortable" | "compact";
+
 // Existing provisional brand hue. Dark mode uses a lighter tone for readable text;
 // this does not settle the Phase 3 brand/identity decision.
 const ACCENT = "#5B5BD6";
@@ -300,6 +302,31 @@ export const getTheme = (_mode: "light" | "dark") => {
         "@media (min-width: 1440px)": {
           ":root": { "--app-page-gutter": "32px" },
         },
+        // Opt-in MUI table/list spacing. Unmigrated consumers keep their defaults.
+        "[data-content-density]": {
+          "--app-table-cell-py": "12px",
+          "--app-list-item-padding": "16px",
+          "--app-list-gap": "12px",
+          "--app-data-target": "32px",
+        },
+        '[data-content-density="compact"]': {
+          "--app-table-cell-py": "8px",
+          "--app-list-item-padding": "12px",
+          "--app-list-gap": "8px",
+        },
+        // Density never shrinks hit regions. Coarse pointers and phone cards get
+        // 44px targets in either mode; desktop controls keep at least 32px.
+        "@media (pointer: coarse), (max-width: 767.95px)": {
+          "[data-content-density]": { "--app-data-target": "44px" },
+        },
+        "[data-content-density] .MuiIconButton-root, [data-content-density] .MuiCheckbox-root": {
+          minWidth: "var(--app-data-target)", minHeight: "var(--app-data-target)",
+        },
+        "[data-content-density] .MuiTableSortLabel-root, [data-content-density] .MuiChip-clickable, [data-content-density] .MuiButton-root, [data-content-density] a": {
+          minHeight: "var(--app-data-target)",
+        },
+        "[data-content-density] a": { display: "inline-flex", alignItems: "center" },
+        "[data-content-density] .MuiTableCell-paddingCheckbox": { width: "auto" },
         body: {
           WebkitFontSmoothing: "antialiased",
           MozOsxFontSmoothing: "grayscale",
@@ -525,8 +552,8 @@ export const getTheme = (_mode: "light" | "dark") => {
           background: theme.vars.palette.grey[100],
         }),
         root: {
-          paddingTop: 10,
-          paddingBottom: 10,
+          paddingTop: "var(--app-table-cell-py, 10px)",
+          paddingBottom: "var(--app-table-cell-py, 10px)",
         },
       },
     },