feat(web): add invoice grid lines and bold headers (AP-44) (#15)

* feat(web): fix shell chrome, logo home, and live nav badges

Refs: AP-42

* feat(web): add invoice grid lines and bold headers

Refs: AP-44

* feat(web): support auto row height for multi-line invoice cells

Refs: AP-44

src/components/MockDataGrid.tsx

@@ -6,6 +6,8 @@ type MockDataGridProps<R extends GridValidRowModel> = DataGridProps<R> & {
 
 export function MockDataGrid<R extends GridValidRowModel>({
   "data-testid": testId,
+  sx,
+  getRowHeight,
   ...props
 }: MockDataGridProps<R>) {
   return (
@@ -19,11 +21,34 @@ export function MockDataGrid<R extends GridValidRowModel>({
           pagination: { paginationModel: { pageSize: 10, page: 0 } },
         }}
         getRowId={(row) => row.id as string}
-        sx={{
+        getRowHeight={getRowHeight ?? (() => "auto")}
-          border: 1,
+        sx={[
-          borderColor: "divider",
+          {
-          backgroundColor: "background.paper",
+            border: 1,
-        }}
+            borderColor: "divider",
+            backgroundColor: "background.paper",
+            "& .MuiDataGrid-columnHeaderTitle": {
+              fontWeight: 700,
+            },
+            "& .MuiDataGrid-cell": {
+              borderBottom: "1px solid",
+              borderColor: "divider",
+              py: 1,
+              alignItems: "flex-start",
+              display: "flex",
+            },
+            "& .MuiDataGrid-cellContent": {
+              whiteSpace: "normal",
+              wordBreak: "break-word",
+              lineHeight: 1.35,
+              width: "100%",
+            },
+            "& .MuiDataGrid-row:last-of-type .MuiDataGrid-cell": {
+              borderBottom: "none",
+            },
+          },
+          ...(Array.isArray(sx) ? sx : sx ? [sx] : []),
+        ]}
         {...props}
       />
     </div>