Make headers taller and fix background

WFP-VAM · Sep 9, 2024 · a02b7f9 · a02b7f9
1 parent c477d64
commit a02b7f9
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 27 deletions.
diff --git a/apps/frontend/components/DisasterTable/DisasterTable.tsx b/apps/frontend/components/DisasterTable/DisasterTable.tsx
@@ -61,7 +61,7 @@ export const DisasterTable = ({
   getRowId,
   isEditable,
   variant,
-  columnHeaderHeight = 'normal',
+  columnHeaderHeight = 'large',
   getRowClassName,
 }: DisasterTableProps): JSX.Element => {
   const theme = useTheme();
@@ -212,12 +212,6 @@ export const DisasterTable = ({
         onMouseLeave={() => setHovering(false)}
         sx={{
           overflow: 'scroll',
-          '@media print': {
-            transform: `scale(${scaleFactor})`,
-            transformOrigin: 'top left',
-            overflow: 'unset',
-            breakInside: 'avoid',
-          },
         }}
       >
         {/* Adds padding for printing */}
@@ -229,23 +223,13 @@ export const DisasterTable = ({
             },
           }}
         />
-        <Stack
-          direction="row"
-          position="relative"
-          m={2}
-          mt={0}
-          sx={{
-            '@media print': {
-              breakInside: 'avoid',
-            },
-          }}
-        >
+        <Stack direction="row" position="relative" m={2} mt={0}>
           {/* Adds padding for printing */}
           <Box
             sx={{
               '@media print': {
                 minWidth: '2rem',
-                minHeight: '100% ',
+                minHeight: '100%',
               },
             }}
           />
@@ -281,6 +265,11 @@ export const DisasterTable = ({
           <Box width={totalWidth}>
             <DataGrid
               sx={{
+                '@media print': {
+                  transform: `scale(${scaleFactor})`,
+                  transformOrigin: 'top left',
+                  overflow: 'unset',
+                },
                 '& .MuiDataGrid-row.highlight-1': {
                   background: `${colors.color1}`,
                 },
@@ -342,7 +331,6 @@ export const DisasterTable = ({
                 '& .MuiDataGrid-scrollbar': {
                   overflow: 'hidden',
                 },
-                breakInside: 'avoid',
                 borderTop: variant === 'bordered' ? undefined : 'none',
                 borderColor: colors.gray,
                 '& .MuiDataGrid-cell:focus-within': {
@@ -383,7 +371,7 @@ export const DisasterTable = ({
             sx={{
               '@media print': {
                 minWidth: '2rem',
-                minHeight: '100% ',
+                minHeight: '100%',
               },
             }}
           />

diff --git a/apps/frontend/components/PrintWrapper/PrintWrapper.tsx b/apps/frontend/components/PrintWrapper/PrintWrapper.tsx
@@ -7,6 +7,7 @@ const printStyles = (
       '@media print': {
         'html, body': {
           fontSize: '0.9em',
+          background: 'white !important',
         },
       },
       '@page': {
@@ -22,12 +23,7 @@ interface Props {
 }
 export const PrintWrapper = ({ printRef, children }: Props): JSX.Element => {
   return (
-    <Box
-      ref={printRef}
-      sx={{
-        background: 'white',
-      }}
-    >
+    <Box ref={printRef}>
       <Box
         sx={{
           '@media print': {