From 99a88a7908a757f0d85a5ddbf91a62d614e9c032 Mon Sep 17 00:00:00 2001
From: juhanikat <juhani.kataja@gmail.com>
Date: Thu, 7 Aug 2025 15:05:00 +0300
Subject: [PATCH 1/4] change Grid to Grid2 in ArrayToTable, and remove
 marginBottom from editingModal

---
 .../DetailView/common/EditingModal.tsx        |  2 +-
 .../DetailView/common/tabLayoutHelpers.tsx    | 24 +++++++++++--------
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/DetailView/common/EditingModal.tsx b/frontend/src/components/DetailView/common/EditingModal.tsx
index 12e1eadcf..86dab8327 100755
--- a/frontend/src/components/DetailView/common/EditingModal.tsx
+++ b/frontend/src/components/DetailView/common/EditingModal.tsx
@@ -31,7 +31,7 @@ export const EditingModal = ({
 
   return (
     <Box>
-      <Button data-cy={dataCy} onClick={() => setOpen(true)} variant="contained" sx={{ marginBottom: '1em' }}>
+      <Button data-cy={dataCy} onClick={() => setOpen(true)} variant="contained">
         {buttonText}
       </Button>
       <Modal
diff --git a/frontend/src/components/DetailView/common/tabLayoutHelpers.tsx b/frontend/src/components/DetailView/common/tabLayoutHelpers.tsx
index 05415df40..3fd2527ed 100755
--- a/frontend/src/components/DetailView/common/tabLayoutHelpers.tsx
+++ b/frontend/src/components/DetailView/common/tabLayoutHelpers.tsx
@@ -1,4 +1,4 @@
-import { Card, Typography, Box, Grid, Divider } from '@mui/material'
+import { Card, Typography, Box, Grid2, Divider } from '@mui/material'
 import { ReactNode } from 'react'
 import { useDetailContext } from '../Context/DetailContext'
 import { EditDataType } from '@/shared/types'
@@ -11,30 +11,31 @@ export const ArrayToTable = ({ array, half }: { array: Array<Array<ReactNode>>;
     return width
   }
   return (
-    <Grid container direction="row">
+    <Grid2 container direction="row" width={'100%'} gap={'1em'}>
       {array.map((row, rowIndex) => (
-        <Grid key={rowIndex} container direction="row" minHeight="2.5em">
+        <Grid2 key={rowIndex} container direction="row" minHeight="2.5em" width={'100%'} height={'100%'} gap={'1em'}>
           {row.map((item, index) => (
-            <Grid
+            <Grid2
               key={index}
-              item
-              xs={getCellWidth(rowIndex, index)}
+              size={{ xs: getCellWidth(rowIndex, index) }}
               sx={{
                 display: 'flex',
                 alignItems: 'center',
                 justifyContent: 'left',
                 height: '100%',
+                width: '100%',
                 borderBottom: '1px solid rgba(224, 224, 224, 1)',
                 borderRight: '1px solid rgba(224, 224, 224, 1)',
+                gap: '1em',
               }}
               padding="5px"
             >
               {typeof item === 'string' ? <b>{item}</b> : item}
-            </Grid>
+            </Grid2>
           ))}
-        </Grid>
+        </Grid2>
       ))}
-    </Grid>
+    </Grid2>
   )
 }
 
@@ -94,6 +95,7 @@ export const Grouped = ({
     borderColor: error ? 'red' : warning ? 'orange' : '',
     borderRadius: error || warning ? 4 : '',
     borderStyle: error || warning ? 'none none none solid' : '',
+    gap: '1em',
   }
 
   const titleColor = error ? 'red' : warning ? 'orange' : 'text.secondary'
@@ -108,7 +110,9 @@ export const Grouped = ({
           <Divider />
         </>
       )}
-      <Box marginTop="15px">{children}</Box>
+      <Box marginTop="15px" gap={'2em'}>
+        {children}
+      </Box>
     </Card>
   )
 }

From caec199740786a46d0b65363e6123c6cf8af8694 Mon Sep 17 00:00:00 2001
From: juhanikat <juhani.kataja@gmail.com>
Date: Thu, 7 Aug 2025 15:19:51 +0300
Subject: [PATCH 2/4] change import

---
 .../DetailView/common/tabLayoutHelpers.tsx      | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/DetailView/common/tabLayoutHelpers.tsx b/frontend/src/components/DetailView/common/tabLayoutHelpers.tsx
index 3fd2527ed..09164d16a 100755
--- a/frontend/src/components/DetailView/common/tabLayoutHelpers.tsx
+++ b/frontend/src/components/DetailView/common/tabLayoutHelpers.tsx
@@ -1,4 +1,5 @@
-import { Card, Typography, Box, Grid2, Divider } from '@mui/material'
+import { Card, Typography, Box, Divider } from '@mui/material'
+import Grid from '@mui/material/Grid2'
 import { ReactNode } from 'react'
 import { useDetailContext } from '../Context/DetailContext'
 import { EditDataType } from '@/shared/types'
@@ -11,13 +12,12 @@ export const ArrayToTable = ({ array, half }: { array: Array<Array<ReactNode>>;
     return width
   }
   return (
-    <Grid2 container direction="row" width={'100%'} gap={'1em'}>
+    <Grid container direction="row" width={'100%'}>
       {array.map((row, rowIndex) => (
-        <Grid2 key={rowIndex} container direction="row" minHeight="2.5em" width={'100%'} height={'100%'} gap={'1em'}>
+        <Grid key={rowIndex} container direction="row" minHeight="2.5em" width={'100%'}>
           {row.map((item, index) => (
-            <Grid2
+            <Grid
               key={index}
-              size={{ xs: getCellWidth(rowIndex, index) }}
               sx={{
                 display: 'flex',
                 alignItems: 'center',
@@ -29,13 +29,14 @@ export const ArrayToTable = ({ array, half }: { array: Array<Array<ReactNode>>;
                 gap: '1em',
               }}
               padding="5px"
+              size={getCellWidth(rowIndex, index)}
             >
               {typeof item === 'string' ? <b>{item}</b> : item}
-            </Grid2>
+            </Grid>
           ))}
-        </Grid2>
+        </Grid>
       ))}
-    </Grid2>
+    </Grid>
   )
 }
 

From 88db161d0c9408a82e8dd5a5d6e879b9d5f4fd1b Mon Sep 17 00:00:00 2001
From: juhanikat <juhani.kataja@gmail.com>
Date: Thu, 7 Aug 2025 15:21:02 +0300
Subject: [PATCH 3/4] remove width from Grid

---
 frontend/src/components/DetailView/common/tabLayoutHelpers.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/frontend/src/components/DetailView/common/tabLayoutHelpers.tsx b/frontend/src/components/DetailView/common/tabLayoutHelpers.tsx
index 09164d16a..30c170907 100755
--- a/frontend/src/components/DetailView/common/tabLayoutHelpers.tsx
+++ b/frontend/src/components/DetailView/common/tabLayoutHelpers.tsx
@@ -23,7 +23,6 @@ export const ArrayToTable = ({ array, half }: { array: Array<Array<ReactNode>>;
                 alignItems: 'center',
                 justifyContent: 'left',
                 height: '100%',
-                width: '100%',
                 borderBottom: '1px solid rgba(224, 224, 224, 1)',
                 borderRight: '1px solid rgba(224, 224, 224, 1)',
                 gap: '1em',

From 6a25d3f7a611c4a93796cb9b20fa171d7aaada26 Mon Sep 17 00:00:00 2001
From: juhanikat <juhani.kataja@gmail.com>
Date: Thu, 7 Aug 2025 15:33:18 +0300
Subject: [PATCH 4/4] Change Box inside Grouped component to be a flex
 container, to fix editingModal button placement

---
 frontend/src/components/DetailView/common/tabLayoutHelpers.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/src/components/DetailView/common/tabLayoutHelpers.tsx b/frontend/src/components/DetailView/common/tabLayoutHelpers.tsx
index 30c170907..98fafbe7d 100755
--- a/frontend/src/components/DetailView/common/tabLayoutHelpers.tsx
+++ b/frontend/src/components/DetailView/common/tabLayoutHelpers.tsx
@@ -25,7 +25,6 @@ export const ArrayToTable = ({ array, half }: { array: Array<Array<ReactNode>>;
                 height: '100%',
                 borderBottom: '1px solid rgba(224, 224, 224, 1)',
                 borderRight: '1px solid rgba(224, 224, 224, 1)',
-                gap: '1em',
               }}
               padding="5px"
               size={getCellWidth(rowIndex, index)}
@@ -110,7 +109,7 @@ export const Grouped = ({
           <Divider />
         </>
       )}
-      <Box marginTop="15px" gap={'2em'}>
+      <Box marginTop="15px" gap={'2em'} sx={{ display: 'flex', flexDirection: 'column', gap: '1em' }}>
         {children}
       </Box>
     </Card>