From 3ac40de291467f549ccc462e09d26eb179547ccb Mon Sep 17 00:00:00 2001
From: Adam Moussa <166072409+amoussa1229@users.noreply.github.com>
Date: Fri, 14 Aug 2026 12:41:13 -0400
Subject: [PATCH] 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 | 35 ++++++++++++++++++++++++++++-----
 1 file changed, 30 insertions(+), 5 deletions(-)

diff --git a/src/components/MockDataGrid.tsx b/src/components/MockDataGrid.tsx
index b2d4c15..9a1af67 100644
--- a/src/components/MockDataGrid.tsx
+++ b/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={{
-          border: 1,
-          borderColor: "divider",
-          backgroundColor: "background.paper",
-        }}
+        getRowHeight={getRowHeight ?? (() => "auto")}
+        sx={[
+          {
+            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>