From 82c79a8216bc56c011c08b41e0ca19cd3be6e18f Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Fri, 5 Sep 2025 12:10:25 +0200
Subject: [PATCH] feat: add borders and spacing to feature impact metrics
 (#10625)

---
 .../FeatureView/FeatureMetrics/FeatureImpactMetrics.tsx  | 6 ++++--
 .../src/component/impact-metrics/GridLayoutWrapper.tsx   | 9 ++++++++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureImpactMetrics.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureImpactMetrics.tsx
index ef5ee5b45c..07b70ff89f 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} />
+                </Box>
             )}
 
             <ChartConfigModal
diff --git a/frontend/src/component/impact-metrics/GridLayoutWrapper.tsx b/frontend/src/component/impact-metrics/GridLayoutWrapper.tsx
index d0f892b5c1..8b1f3ef4ca 100644
--- a/frontend/src/component/impact-metrics/GridLayoutWrapper.tsx
+++ b/frontend/src/component/impact-metrics/GridLayoutWrapper.tsx
@@ -52,6 +52,10 @@ type GridLayoutWrapperProps = {
     rowHeight?: number;
 };
 
+const ItemContainer = styled('div')(({ theme }) => ({
+    border: `1px solid ${theme.palette.divider}`,
+}));
+
 export const GridLayoutWrapper: FC<GridLayoutWrapperProps> = ({
     items,
     onLayoutChange,
@@ -102,7 +106,10 @@ export const GridLayoutWrapper: FC<GridLayoutWrapperProps> = ({
     }, [items, cols, isMobileBreakpoint]);
 
     const children = useMemo(
-        () => items.map((item) => <div key={item.id}>{item.component}</div>),
+        () =>
+            items.map((item) => (
+                <ItemContainer key={item.id}>{item.component}</ItemContainer>
+            )),
         [items],
     );