Move up/down chips next to the monitor name

client/src/Components/v1/Host/index.jsx

@@ -2,6 +2,7 @@ import { Stack, Typography } from "@mui/material";
 import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
 import Dot from "../Dot/index.jsx";
+import { StatusLabel } from "@/Components/v1/Label/index.jsx";
 /**
  * Host component.
  * This subcomponent receives a params object and displays the host details.
@@ -14,7 +15,7 @@ import Dot from "../Dot/index.jsx";
  * @param {number} params.percentage - The percentage to display.
  * @returns {React.ElementType} Returns a div element with the host details.
  */
-const Host = ({ url, title, percentageColor, percentage, showURL }) => {
+const Host = ({ url, title, percentageColor, percentage, showURL, status }) => {
 	const theme = useTheme();
 	return (
 		<Stack>
@@ -22,21 +23,36 @@ const Host = ({ url, title, percentageColor, percentage, showURL }) => {
 				direction="row"
 				position="relative"
 				alignItems="center"
-				gap={theme.spacing(4)}
+				gap={theme.spacing(5)}
 			>
-				{title}
+				<Typography
+					variant="h6"
+					sx={{
+						fontWeight: 600,
+						fontSize: "1.1rem",
+					}}
+				>
+					{title}
+				</Typography>
+
 				{percentageColor && percentage && (
 					<>
 						<Dot />
 						<Typography
-							component="span"
+							variant="h6"
 							sx={{
+								fontWeight: 600,
+								fontSize: "1.1rem",
 								color: percentageColor,
-								fontWeight: 500,
 							}}
 						>
 							{percentage}%
 						</Typography>
+						<StatusLabel
+							status={status}
+							text={status}
+							customStyles={{ textTransform: "capitalize" }}
+						/>
 					</>
 				)}
 			</Stack>
@@ -51,6 +67,7 @@ Host.propTypes = {
 	percentage: PropTypes.string,
 	url: PropTypes.string,
 	showURL: PropTypes.bool,
+	status: PropTypes.string,
 };
 
 export default Host;

client/src/Components/v1/Label/index.jsx

@@ -147,11 +147,9 @@ const StatusLabel = ({ status, text, customStyles }) => {
 			}}
 		>
 			<Box
-				width={7}
-				height={7}
 				bgcolor={theme.palette[themeColor].lowContrast}
-				borderRadius="50%"
-				marginRight="5px"
+				borderRadius="0%"
+				marginRight="1px"
 			/>
 		</BaseLabel>
 	);

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

@@ -30,7 +30,7 @@ const MonitorsList = ({
 					<Stack
 						key={monitor._id}
 						width="100%"
-						gap={theme.spacing(3)}
+						gap={theme.spacing(10)}
 						margin="0 auto"
 						maxWidth="95%"
 					>
@@ -41,6 +41,7 @@ const MonitorsList = ({
 							percentageColor={monitor.percentageColor}
 							percentage={monitor.percentage}
 							showURL={showURL}
+							status={status}
 						/>
 						<Stack
 							direction="row"
@@ -52,17 +53,6 @@ const MonitorsList = ({
 									<StatusPageBarChart checks={monitor?.checks?.slice().reverse()} />
 								</Box>
 							)}
-							<Box
-								flex={statusPage.showCharts !== false ? 1 : 10}
-								display="flex"
-								justifyContent="flex-end"
-							>
-								<StatusLabel
-									status={status}
-									text={status}
-									customStyles={{ textTransform: "capitalize" }}
-								/>
-							</Box>
 						</Stack>
 					</Stack>
 				);