From e156f1e48685eece5458cb2660fe60fa294cee7c Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Fri, 5 Sep 2025 12:04:57 +0200
Subject: [PATCH] refactor: simplify ItemContainer styling by removing borders
 prop

---
 .../component/impact-metrics/GridLayoutWrapper.tsx  | 13 ++++---------
 1 file changed, 4 insertions(+), 9 deletions(-)

diff --git a/frontend/src/component/impact-metrics/GridLayoutWrapper.tsx b/frontend/src/component/impact-metrics/GridLayoutWrapper.tsx
index 66c543170b..29c931db74 100644
--- a/frontend/src/component/impact-metrics/GridLayoutWrapper.tsx
+++ b/frontend/src/component/impact-metrics/GridLayoutWrapper.tsx
@@ -53,10 +53,8 @@ type GridLayoutWrapperProps = {
     borders?: boolean;
 };
 
-const ItemContainer = styled('div', {
-    shouldForwardProp: (prop) => prop !== 'borders',
-})<{ borders: boolean }>(({ theme, borders }) => ({
-    ...(borders && { border: `1px solid ${theme.palette.divider}` }),
+const ItemContainer = styled('div')(({ theme }) => ({
+    border: `1px solid ${theme.palette.divider}`,
 }));
 
 export const GridLayoutWrapper: FC<GridLayoutWrapperProps> = ({
@@ -64,7 +62,6 @@ export const GridLayoutWrapper: FC<GridLayoutWrapperProps> = ({
     onLayoutChange,
     cols = { lg: 12, md: 12, sm: 6, xs: 4, xxs: 2 },
     rowHeight = 180,
-    borders = false,
 }) => {
     const theme = useTheme();
     const isMobileBreakpoint = useMediaQuery(theme.breakpoints.down('md'));
@@ -112,11 +109,9 @@ export const GridLayoutWrapper: FC<GridLayoutWrapperProps> = ({
     const children = useMemo(
         () =>
             items.map((item) => (
-                <ItemContainer key={item.id} borders={borders}>
-                    {item.component}
-                </ItemContainer>
+                <ItemContainer key={item.id}>{item.component}</ItemContainer>
             )),
-        [items, borders],
+        [items],
     );
 
     const handleLayoutChange = useCallback(