From b1b1684da10154fda7420fe07777353179cb12cd Mon Sep 17 00:00:00 2001
From: Vishnu Sreekumaran Nair <200557136@student.georgianc.on.ca>
Date: Wed, 2 Apr 2025 18:57:31 -0400
Subject: [PATCH] use box wrapper to contain the Tablist component

---
 .../StatusPage/Create/Components/Tabs/index.jsx     | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/Pages/StatusPage/Create/Components/Tabs/index.jsx b/src/Pages/StatusPage/Create/Components/Tabs/index.jsx
index 11f6b4f9a..0f2283159 100644
--- a/src/Pages/StatusPage/Create/Components/Tabs/index.jsx
+++ b/src/Pages/StatusPage/Create/Components/Tabs/index.jsx
@@ -1,6 +1,6 @@
 // Components
 import { TabContext, TabList } from "@mui/lab";
-import { Tab } from "@mui/material";
+import { Box, Tab, useTheme } from "@mui/material";
 import Settings from "./Settings";
 import Content from "./Content";
 
@@ -22,8 +22,17 @@ const Tabs = ({
 	setTab,
 	TAB_LIST,
 }) => {
+
+	const theme = useTheme();
 	return (
 		<TabContext value={TAB_LIST[tab]}>
+			<Box
+				sx={{
+					borderBottom: `1px solid ${theme.palette.primary.lowContrast}`,
+					"& .MuiTabs-root": { height: "fit-content", minHeight: "0" },
+				}}
+				>
+
 			<TabList
 				onChange={(_, tab) => {
 					setTab(TAB_LIST.indexOf(tab));
@@ -39,6 +48,7 @@ const Tabs = ({
 					);
 				})}
 			</TabList>
+			</Box>
 			{tab === 0 ? (
 				<Settings
 					tabValue={TAB_LIST[0]}
@@ -61,6 +71,7 @@ const Tabs = ({
 					setSelectedMonitors={setSelectedMonitors}
 				/>
 			)}
+			
 		</TabContext>
 	);
 };