From b9a8fda77e5708ad2ae51cac5445c358350deed7 Mon Sep 17 00:00:00 2001
From: Owaiseimdad <owaiseimdad@gmail.com>
Date: Thu, 3 Apr 2025 09:36:03 +0530
Subject: [PATCH] Added a new logic to calculate the width of the status boxes
 based on the parent spacings.

---
 src/Components/StatBox/index.jsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/Components/StatBox/index.jsx b/src/Components/StatBox/index.jsx
index 7fd9bb2d8..ed0b6694a 100644
--- a/src/Components/StatBox/index.jsx
+++ b/src/Components/StatBox/index.jsx
@@ -80,9 +80,8 @@ const StatBox = ({
 			};
 
 	const responsiveWidths = {
-		default: "calc(95% / 4)",
-		xl: "calc(95% / 3)",
-		md: "calc(95% / 2)",
+		default: `calc(25% - (3 * ${theme.spacing(8)} / 4))`, 
+		md: `calc(50% - (1 * ${theme.spacing(8)} / 2))`,
 	};
 
 	return (
@@ -94,9 +93,6 @@ const StatBox = ({
 				minWidth: 200,
 				// this is for status box to be reponsive on diff screens
 				width: responsiveWidths.default, // Default: 4 items per row
-				[theme.breakpoints.down("xl")]: {
-					width: responsiveWidths.xl, // 3 items per row
-				},
 				[theme.breakpoints.down("md")]: {
 					width: responsiveWidths.md, // 2 items per row
 				},