From 08988f7d7dc753f6311bda9b204bf7a69a8784c3 Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Fri, 5 Sep 2025 11:50:39 +0200
Subject: [PATCH] feat: add borders and spacing to feature impact metrics

---
 .../FeatureMetrics/FeatureImpactMetrics.tsx     |  6 ++++--
 .../impact-metrics/GridLayoutWrapper.tsx        | 17 +++++++++++++++--
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureImpactMetrics.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureImpactMetrics.tsx
index ef5ee5b45c..9dccb22df7 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureImpactMetrics.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureImpactMetrics.tsx
@@ -1,6 +1,6 @@
 import { PageContent } from 'component/common/PageContent/PageContent.tsx';
 import { PageHeader } from '../../../common/PageHeader/PageHeader.tsx';
-import { styled, Typography } from '@mui/material';
+import { Box, styled, Typography } from '@mui/material';
 import Add from '@mui/icons-material/Add';
 import { useImpactMetricsMetadata } from 'hooks/api/getters/useImpactMetricsMetadata/useImpactMetricsMetadata.ts';
 import { type FC, useMemo, useState } from 'react';
@@ -151,7 +151,9 @@ export const FeatureImpactMetrics: FC = () => {
             />
 
             {impactMetrics.configs.length > 0 && (
-                <GridLayoutWrapper items={gridItems} />
+                <Box sx={(theme) => ({ marginTop: theme.spacing(3) })}>
+                    <GridLayoutWrapper items={gridItems} borders />
+                </Box>
             )}
 
             <ChartConfigModal
diff --git a/frontend/src/component/impact-metrics/GridLayoutWrapper.tsx b/frontend/src/component/impact-metrics/GridLayoutWrapper.tsx
index d0f892b5c1..66c543170b 100644
--- a/frontend/src/component/impact-metrics/GridLayoutWrapper.tsx
+++ b/frontend/src/component/impact-metrics/GridLayoutWrapper.tsx
@@ -50,13 +50,21 @@ type GridLayoutWrapperProps = {
     onLayoutChange?: (layout: LayoutItem[]) => void;
     cols?: { lg: number; md: number; sm: number; xs: number; xxs: number };
     rowHeight?: number;
+    borders?: boolean;
 };
 
+const ItemContainer = styled('div', {
+    shouldForwardProp: (prop) => prop !== 'borders',
+})<{ borders: boolean }>(({ theme, borders }) => ({
+    ...(borders && { border: `1px solid ${theme.palette.divider}` }),
+}));
+
 export const GridLayoutWrapper: FC<GridLayoutWrapperProps> = ({
     items,
     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'));
@@ -102,8 +110,13 @@ export const GridLayoutWrapper: FC<GridLayoutWrapperProps> = ({
     }, [items, cols, isMobileBreakpoint]);
 
     const children = useMemo(
-        () => items.map((item) => <div key={item.id}>{item.component}</div>),
-        [items],
+        () =>
+            items.map((item) => (
+                <ItemContainer key={item.id} borders={borders}>
+                    {item.component}
+                </ItemContainer>
+            )),
+        [items, borders],
     );
 
     const handleLayoutChange = useCallback(