From 06779a1a32065857a505020f498e8e09a42bfafb Mon Sep 17 00:00:00 2001
From: CREDO23 <thierrybakera12@gmail.com>
Date: Mon, 12 Jan 2026 17:30:15 +0200
Subject: [PATCH] Unify settings pages styling with main layout

---
 .../[search_space_id]/settings/page.tsx       | 35 +++++++++++--------
 .../app/dashboard/user/settings/page.tsx      | 31 +++++++++-------
 2 files changed, 38 insertions(+), 28 deletions(-)

diff --git a/surfsense_web/app/dashboard/[search_space_id]/settings/page.tsx b/surfsense_web/app/dashboard/[search_space_id]/settings/page.tsx
index d53a6b26c..fde676dff 100644
--- a/surfsense_web/app/dashboard/[search_space_id]/settings/page.tsx
+++ b/surfsense_web/app/dashboard/[search_space_id]/settings/page.tsx
@@ -87,7 +87,8 @@ function SettingsSidebar({
 			<aside
 				className={cn(
 					"fixed md:relative left-0 top-0 z-50 md:z-auto",
-					"w-72 shrink-0 bg-background md:bg-muted/20 h-full flex flex-col",
+					"w-72 shrink-0 bg-background md:bg-muted/30 h-full flex flex-col",
+					"md:border-r",
 					"transition-transform duration-300 ease-out",
 					"md:translate-x-0",
 					isOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"
@@ -177,7 +178,7 @@ function SettingsSidebar({
 
 				{/* Footer */}
 				<div className="p-4">
-					<p className="text-xs text-muted-foreground text-center">SurfSense Settings</p>
+					<p className="text-xs text-muted-foreground text-center">Search Space Settings</p>
 				</div>
 			</aside>
 		</>
@@ -286,20 +287,24 @@ export default function SettingsPage() {
 			initial={{ opacity: 0 }}
 			animate={{ opacity: 1 }}
 			transition={{ duration: 0.3 }}
-			className="h-full flex bg-background"
+			className="fixed inset-0 z-50 flex bg-muted/40"
 		>
-			<SettingsSidebar
-				activeSection={activeSection}
-				onSectionChange={setActiveSection}
-				onBackToApp={handleBackToApp}
-				isOpen={isSidebarOpen}
-				onClose={() => setIsSidebarOpen(false)}
-			/>
-			<SettingsContent
-				activeSection={activeSection}
-				searchSpaceId={searchSpaceId}
-				onMenuClick={() => setIsSidebarOpen(true)}
-			/>
+			<div className="flex h-full w-full p-0 md:p-2">
+				<div className="flex h-full w-full overflow-hidden bg-background md:rounded-xl md:border md:shadow-sm">
+					<SettingsSidebar
+						activeSection={activeSection}
+						onSectionChange={setActiveSection}
+						onBackToApp={handleBackToApp}
+						isOpen={isSidebarOpen}
+						onClose={() => setIsSidebarOpen(false)}
+					/>
+					<SettingsContent
+						activeSection={activeSection}
+						searchSpaceId={searchSpaceId}
+						onMenuClick={() => setIsSidebarOpen(true)}
+					/>
+				</div>
+			</div>
 		</motion.div>
 	);
 }
diff --git a/surfsense_web/app/dashboard/user/settings/page.tsx b/surfsense_web/app/dashboard/user/settings/page.tsx
index 508ff65b5..5b0ac5fa0 100644
--- a/surfsense_web/app/dashboard/user/settings/page.tsx
+++ b/surfsense_web/app/dashboard/user/settings/page.tsx
@@ -73,7 +73,8 @@ function UserSettingsSidebar({
 			<aside
 				className={cn(
 					"fixed left-0 top-0 z-50 md:relative md:z-auto",
-					"flex h-full w-72 shrink-0 flex-col bg-background md:bg-muted/20",
+					"flex h-full w-72 shrink-0 flex-col bg-background md:bg-muted/30",
+					"md:border-r",
 					"transition-transform duration-300 ease-out",
 					"md:translate-x-0",
 					isOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"
@@ -305,19 +306,23 @@ export default function UserSettingsPage() {
 			initial={{ opacity: 0 }}
 			animate={{ opacity: 1 }}
 			transition={{ duration: 0.3 }}
-			className="fixed inset-0 z-50 flex bg-background"
+			className="fixed inset-0 z-50 flex bg-muted/40"
 		>
-			<UserSettingsSidebar
-				activeSection={activeSection}
-				onSectionChange={setActiveSection}
-				onBackToApp={handleBackToApp}
-				isOpen={isSidebarOpen}
-				onClose={() => setIsSidebarOpen(false)}
-				navItems={navItems}
-			/>
-			{activeSection === "api-key" && (
-				<ApiKeyContent onMenuClick={() => setIsSidebarOpen(true)} />
-			)}
+			<div className="flex h-full w-full p-0 md:p-2">
+				<div className="flex h-full w-full overflow-hidden bg-background md:rounded-xl md:border md:shadow-sm">
+					<UserSettingsSidebar
+						activeSection={activeSection}
+						onSectionChange={setActiveSection}
+						onBackToApp={handleBackToApp}
+						isOpen={isSidebarOpen}
+						onClose={() => setIsSidebarOpen(false)}
+						navItems={navItems}
+					/>
+					{activeSection === "api-key" && (
+						<ApiKeyContent onMenuClick={() => setIsSidebarOpen(true)} />
+					)}
+				</div>
+			</div>
 		</motion.div>
 	);
 }