From 480ba034cebab20aa1ec5c3e170a594cc56b705f Mon Sep 17 00:00:00 2001
From: singh-kanwarpreet <kanwarpreet388@gmail.com>
Date: Wed, 13 Aug 2025 14:47:09 +0530
Subject: [PATCH 1/5] Made NavBar Still

---
 client/src/Pages/Logs/index.jsx | 47 ++++++++++++++++++++++++---------
 1 file changed, 34 insertions(+), 13 deletions(-)

diff --git a/client/src/Pages/Logs/index.jsx b/client/src/Pages/Logs/index.jsx
index db421e312..1b2a7411d 100644
--- a/client/src/Pages/Logs/index.jsx
+++ b/client/src/Pages/Logs/index.jsx
@@ -23,21 +23,42 @@ const Logs = () => {
 	};
 
 	const BREADCRUMBS = [{ name: t("logsPage.title"), path: "/logs" }];
+
+	// Height of the header (Breadcrumbs + Tabs)
+	const HEADER_HEIGHT = theme.spacing(25);
+
 	return (
-		<Stack gap={theme.spacing(20)}>
-			<Breadcrumbs list={BREADCRUMBS} />
-			<Tabs
-				value={value}
-				onChange={handleChange}
+		<>
+			<Stack
+				gap={theme.spacing(20)}
+				sx={{
+					position: "sticky",
+					top: 0,
+					left: 0,
+					right: 0,
+					zIndex: 1000,
+					backgroundColor: theme.palette.primary.main,
+					paddingY: theme.spacing(2),
+				}}
 			>
-				<Tab label={t("logsPage.tabs.logs")} />
-				<Tab label={t("logsPage.tabs.queue")} />
-				<Tab label={t("logsPage.tabs.diagnostics")} />
-			</Tabs>
-			{value === 0 && <LogsComponent />}
-			{value === 1 && <Queue />}
-			{value === 2 && <Diagnostics />}
-		</Stack>
+				<Breadcrumbs list={BREADCRUMBS} />
+				<Tabs
+					value={value}
+					onChange={handleChange}
+				>
+					<Tab label={t("logsPage.tabs.logs")} />
+					<Tab label={t("logsPage.tabs.queue")} />
+					<Tab label={t("logsPage.tabs.diagnostics")} />
+				</Tabs>
+			</Stack>
+
+			{/* Main content below fixed header */}
+			<Stack sx={{ paddingTop: HEADER_HEIGHT }}>
+				{value === 0 && <LogsComponent />}
+				{value === 1 && <Queue />}
+				{value === 2 && <Diagnostics />}
+			</Stack>
+		</>
 	);
 };
 

From 7ab5f4ab09e0ebe6f62287023c2b8653eacca8f5 Mon Sep 17 00:00:00 2001
From: singh-kanwarpreet <kanwarpreet388@gmail.com>
Date: Wed, 13 Aug 2025 22:41:13 +0530
Subject: [PATCH 2/5] Refactored code

---
 client/src/Pages/Logs/Logs/index.jsx | 20 ++++++++++++++++++--
 client/src/Pages/Logs/index.jsx      | 24 +++++++++---------------
 2 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/client/src/Pages/Logs/Logs/index.jsx b/client/src/Pages/Logs/Logs/index.jsx
index b65f9c0fd..a5bc9757e 100644
--- a/client/src/Pages/Logs/Logs/index.jsx
+++ b/client/src/Pages/Logs/Logs/index.jsx
@@ -50,8 +50,17 @@ const Logs = () => {
 		{ _id: "debug", name: t("logsPage.logLevelSelect.values.debug") },
 	];
 	return (
-		<Stack gap={theme.spacing(4)}>
-			<Box>
+		<Stack gap={theme.spacing(8)}>
+			<Box
+				sx={{
+					position: "sticky",
+					top: 40,
+					left: 10,
+					zIndex: 950,
+					backgroundColor: theme.palette.tertiary.main,
+					paddingY: theme.spacing(6),
+				}}
+			>
 				<Typography variant="h2">{t("logsPage.description")}</Typography>
 			</Box>
 			<Divider color={theme.palette.accent.main} />
@@ -61,6 +70,13 @@ const Logs = () => {
 				alignItems="center"
 				gap={theme.spacing(4)}
 				mt={theme.spacing(10)}
+				sx={{
+					position: "sticky",
+					top: 80,
+					zIndex: 900,
+					backgroundColor: theme.palette.tertiary.main,
+					paddingY: theme.spacing(1),
+				}}
 			>
 				<Typography>{t("logsPage.logLevelSelect.title")}</Typography>
 				<Select
diff --git a/client/src/Pages/Logs/index.jsx b/client/src/Pages/Logs/index.jsx
index 1b2a7411d..0e560997a 100644
--- a/client/src/Pages/Logs/index.jsx
+++ b/client/src/Pages/Logs/index.jsx
@@ -24,24 +24,20 @@ const Logs = () => {
 
 	const BREADCRUMBS = [{ name: t("logsPage.title"), path: "/logs" }];
 
-	// Height of the header (Breadcrumbs + Tabs)
-	const HEADER_HEIGHT = theme.spacing(25);
-
 	return (
-		<>
+		<Stack gap={theme.spacing(20)}>
+			<Breadcrumbs list={BREADCRUMBS} />
+
 			<Stack
-				gap={theme.spacing(20)}
+				gap={theme.spacing(10)}
 				sx={{
 					position: "sticky",
 					top: 0,
-					left: 0,
-					right: 0,
 					zIndex: 1000,
 					backgroundColor: theme.palette.primary.main,
 					paddingY: theme.spacing(2),
 				}}
 			>
-				<Breadcrumbs list={BREADCRUMBS} />
 				<Tabs
 					value={value}
 					onChange={handleChange}
@@ -52,13 +48,11 @@ const Logs = () => {
 				</Tabs>
 			</Stack>
 
-			{/* Main content below fixed header */}
-			<Stack sx={{ paddingTop: HEADER_HEIGHT }}>
-				{value === 0 && <LogsComponent />}
-				{value === 1 && <Queue />}
-				{value === 2 && <Diagnostics />}
-			</Stack>
-		</>
+			{/* Main content */}
+			{value === 0 && <LogsComponent />}
+			{value === 1 && <Queue />}
+			{value === 2 && <Diagnostics />}
+		</Stack>
 	);
 };
 

From 13a5f699bafc492de810c2dac921087e5b0350c8 Mon Sep 17 00:00:00 2001
From: singh-kanwarpreet <kanwarpreet388@gmail.com>
Date: Wed, 13 Aug 2025 22:53:18 +0530
Subject: [PATCH 3/5] Updated Style

---
 client/src/Pages/Logs/Logs/index.jsx | 48 +++++++++++-----------------
 1 file changed, 19 insertions(+), 29 deletions(-)

diff --git a/client/src/Pages/Logs/Logs/index.jsx b/client/src/Pages/Logs/Logs/index.jsx
index a5bc9757e..29cc55a9b 100644
--- a/client/src/Pages/Logs/Logs/index.jsx
+++ b/client/src/Pages/Logs/Logs/index.jsx
@@ -51,41 +51,31 @@ const Logs = () => {
 	];
 	return (
 		<Stack gap={theme.spacing(8)}>
-			<Box
+			<Stack
+				gap={theme.spacing(8)}
 				sx={{
 					position: "sticky",
-					top: 40,
-					left: 10,
+					top: theme.spacing(19),
 					zIndex: 950,
-					backgroundColor: theme.palette.tertiary.main,
-					paddingY: theme.spacing(6),
+					backgroundColor: theme.palette.primary.main,
+					paddingY: theme.spacing(7),
+					paddingX: theme.spacing(7),
 				}}
 			>
 				<Typography variant="h2">{t("logsPage.description")}</Typography>
-			</Box>
-			<Divider color={theme.palette.accent.main} />
-
-			<Stack
-				direction="row"
-				alignItems="center"
-				gap={theme.spacing(4)}
-				mt={theme.spacing(10)}
-				sx={{
-					position: "sticky",
-					top: 80,
-					zIndex: 900,
-					backgroundColor: theme.palette.tertiary.main,
-					paddingY: theme.spacing(1),
-				}}
-			>
-				<Typography>{t("logsPage.logLevelSelect.title")}</Typography>
-				<Select
-					items={LOG_LEVELS}
-					value={logLevel}
-					onChange={(e) => {
-						setLogLevel(e.target.value);
-					}}
-				/>
+				<Divider color={theme.palette.accent.main} />
+				<Stack
+					direction="row"
+					alignItems="center"
+					gap={theme.spacing(4)}
+				>
+					<Typography>{t("logsPage.logLevelSelect.title")}</Typography>
+					<Select
+						items={LOG_LEVELS}
+						value={logLevel}
+						onChange={(e) => setLogLevel(e.target.value)}
+					/>
+				</Stack>
 			</Stack>
 
 			<Box

From ce667bc53bb460785f79bd1ea0b6abcb3cdd3075 Mon Sep 17 00:00:00 2001
From: singh-kanwarpreet <kanwarpreet388@gmail.com>
Date: Thu, 14 Aug 2025 15:02:44 +0530
Subject: [PATCH 4/5] Improved code quality

---
 client/src/Pages/Logs/Logs/index.jsx | 58 ++++++++++++++++++----------
 client/src/Pages/Logs/index.jsx      | 28 +++++---------
 2 files changed, 46 insertions(+), 40 deletions(-)

diff --git a/client/src/Pages/Logs/Logs/index.jsx b/client/src/Pages/Logs/Logs/index.jsx
index 29cc55a9b..d9ce2a25c 100644
--- a/client/src/Pages/Logs/Logs/index.jsx
+++ b/client/src/Pages/Logs/Logs/index.jsx
@@ -50,32 +50,48 @@ const Logs = () => {
 		{ _id: "debug", name: t("logsPage.logLevelSelect.values.debug") },
 	];
 	return (
-		<Stack gap={theme.spacing(8)}>
-			<Stack
-				gap={theme.spacing(8)}
+		<Stack gap={theme.spacing(4)}>
+			<Box
 				sx={{
 					position: "sticky",
-					top: theme.spacing(19),
-					zIndex: 950,
-					backgroundColor: theme.palette.primary.main,
-					paddingY: theme.spacing(7),
-					paddingX: theme.spacing(7),
+					top: theme.spacing(17),
+					backdropFilter: "blur(10px)",
+					paddingY: theme.spacing(5),
+					paddingLeft: theme.spacing(6),
 				}}
 			>
 				<Typography variant="h2">{t("logsPage.description")}</Typography>
-				<Divider color={theme.palette.accent.main} />
-				<Stack
-					direction="row"
-					alignItems="center"
-					gap={theme.spacing(4)}
-				>
-					<Typography>{t("logsPage.logLevelSelect.title")}</Typography>
-					<Select
-						items={LOG_LEVELS}
-						value={logLevel}
-						onChange={(e) => setLogLevel(e.target.value)}
-					/>
-				</Stack>
+			</Box>
+			<Divider
+				color={theme.palette.accent.main}
+				sx={{
+					position: "sticky",
+					top: theme.spacing(33),
+					backdropFilter: "blur(10px)",
+				}}
+			/>
+
+			<Stack
+				direction="row"
+				alignItems="center"
+				gap={theme.spacing(4)}
+				mt={theme.spacing(10)}
+				sx={{
+					position: "sticky",
+					top: theme.spacing(34),
+					backdropFilter: "blur(10px)",
+					paddingTop: theme.spacing(4),
+					paddingLeft: theme.spacing(6),
+				}}
+			>
+				<Typography>{t("logsPage.logLevelSelect.title")}</Typography>
+				<Select
+					items={LOG_LEVELS}
+					value={logLevel}
+					onChange={(e) => {
+						setLogLevel(e.target.value);
+					}}
+				/>
 			</Stack>
 
 			<Box
diff --git a/client/src/Pages/Logs/index.jsx b/client/src/Pages/Logs/index.jsx
index 0e560997a..5b9879051 100644
--- a/client/src/Pages/Logs/index.jsx
+++ b/client/src/Pages/Logs/index.jsx
@@ -23,32 +23,22 @@ const Logs = () => {
 	};
 
 	const BREADCRUMBS = [{ name: t("logsPage.title"), path: "/logs" }];
-
 	return (
 		<Stack gap={theme.spacing(20)}>
 			<Breadcrumbs list={BREADCRUMBS} />
-
-			<Stack
-				gap={theme.spacing(10)}
+			<Tabs
+				value={value}
+				onChange={handleChange}
 				sx={{
 					position: "sticky",
-					top: 0,
-					zIndex: 1000,
-					backgroundColor: theme.palette.primary.main,
-					paddingY: theme.spacing(2),
+					top: theme.spacing(0),
+					backdropFilter: "blur(10px)",
 				}}
 			>
-				<Tabs
-					value={value}
-					onChange={handleChange}
-				>
-					<Tab label={t("logsPage.tabs.logs")} />
-					<Tab label={t("logsPage.tabs.queue")} />
-					<Tab label={t("logsPage.tabs.diagnostics")} />
-				</Tabs>
-			</Stack>
-
-			{/* Main content */}
+				<Tab label={t("logsPage.tabs.logs")} />
+				<Tab label={t("logsPage.tabs.queue")} />
+				<Tab label={t("logsPage.tabs.diagnostics")} />
+			</Tabs>
 			{value === 0 && <LogsComponent />}
 			{value === 1 && <Queue />}
 			{value === 2 && <Diagnostics />}

From a1cbbf5d426dbdf01eaa383f76e19d40fd8de102 Mon Sep 17 00:00:00 2001
From: singh-kanwarpreet <kanwarpreet388@gmail.com>
Date: Thu, 14 Aug 2025 15:06:01 +0530
Subject: [PATCH 5/5] Added zIndex as earlier causes problem in diagnostics

---
 client/src/Pages/Logs/index.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/client/src/Pages/Logs/index.jsx b/client/src/Pages/Logs/index.jsx
index 5b9879051..52aa60199 100644
--- a/client/src/Pages/Logs/index.jsx
+++ b/client/src/Pages/Logs/index.jsx
@@ -33,6 +33,7 @@ const Logs = () => {
 					position: "sticky",
 					top: theme.spacing(0),
 					backdropFilter: "blur(10px)",
+					zIndex: theme.zIndex.appBar,
 				}}
 			>
 				<Tab label={t("logsPage.tabs.logs")} />