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 1/2] 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>
 	);
 };

From 4fd85b4a2c877ba2e881145ead52e4dc04c80691 Mon Sep 17 00:00:00 2001
From: Vishnu Sreekumaran Nair <200557136@student.georgianc.on.ca>
Date: Wed, 2 Apr 2025 19:00:59 -0400
Subject: [PATCH 2/2] add minHeight to muiTab styles

---
 .../Create/Components/Tabs/index.jsx          | 31 +++++++++----------
 src/Utils/Theme/globalTheme.js                |  1 +
 2 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/Pages/StatusPage/Create/Components/Tabs/index.jsx b/src/Pages/StatusPage/Create/Components/Tabs/index.jsx
index 0f2283159..da2da9acf 100644
--- a/src/Pages/StatusPage/Create/Components/Tabs/index.jsx
+++ b/src/Pages/StatusPage/Create/Components/Tabs/index.jsx
@@ -31,23 +31,22 @@ const Tabs = ({
 					borderBottom: `1px solid ${theme.palette.primary.lowContrast}`,
 					"& .MuiTabs-root": { height: "fit-content", minHeight: "0" },
 				}}
-				>
-
-			<TabList
-				onChange={(_, tab) => {
-					setTab(TAB_LIST.indexOf(tab));
-				}}
 			>
-				{TAB_LIST.map((tab, idx) => {
-					return (
-						<Tab
-							key={tab}
-							label={TAB_LIST[idx]}
-							value={TAB_LIST[idx]}
-						/>
-					);
-				})}
-			</TabList>
+				<TabList
+					onChange={(_, tab) => {
+						setTab(TAB_LIST.indexOf(tab));
+					}}
+				>
+					{TAB_LIST.map((tab, idx) => {
+						return (
+							<Tab
+								key={tab}
+								label={TAB_LIST[idx]}
+								value={TAB_LIST[idx]}
+							/>
+						);
+					})}
+				</TabList>
 			</Box>
 			{tab === 0 ? (
 				<Settings
diff --git a/src/Utils/Theme/globalTheme.js b/src/Utils/Theme/globalTheme.js
index f7061343b..ce3a62557 100644
--- a/src/Utils/Theme/globalTheme.js
+++ b/src/Utils/Theme/globalTheme.js
@@ -361,6 +361,7 @@ const baseTheme = (palette) => ({
 				color: theme.palette.tertiary.contrastText,
 				backgroundColor: theme.palette.primary.main,
 				height: '34px',
+				minHeight: '34px',
 				borderRadius: 0,
 				textTransform: "none",
 				minWidth: "fit-content",