Fix centering issue for status page bars

client/src/Pages/v1/StatusPage/Status/Components/MonitorsList/index.jsx

@@ -30,10 +30,9 @@ const MonitorsList = ({
 					<Stack
 						key={monitor._id}
 						width="100%"
-						gap={theme.spacing(2)}
+						gap={theme.spacing(3)}
 						margin="0 auto"
-						maxWidth="1200px"
-						paddingX={theme.spacing(7)}
+						maxWidth="95%"
 					>
 						<Host
 							key={monitor._id}
@@ -46,14 +45,18 @@ const MonitorsList = ({
 						<Stack
 							direction="row"
 							alignItems="center"
-							gap={theme.spacing(20)}
+							gap={theme.spacing(1)}
 						>
 							{statusPage.showCharts !== false && (
 								<Box flex={9}>
 									<StatusPageBarChart checks={monitor?.checks?.slice().reverse()} />
 								</Box>
 							)}
-							<Box flex={statusPage.showCharts !== false ? 1 : 10}>
+							<Box
+								flex={statusPage.showCharts !== false ? 1 : 10}
+								display="flex"
+								justifyContent="right"
+							>
 								<StatusLabel
 									status={status}
 									text={status}