From e8c23778242a5b592ff4812b6a106b0558f8aeb2 Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Wed, 8 Apr 2026 16:04:11 +0530
Subject: [PATCH] refactor: adjust className formatting in LayoutShell and
 optimize motion.div properties in SidebarSlideOutPanel

---
 .../components/layout/ui/shell/LayoutShell.tsx  |  2 +-
 .../layout/ui/sidebar/SidebarSlideOutPanel.tsx  | 17 ++++++++---------
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/surfsense_web/components/layout/ui/shell/LayoutShell.tsx b/surfsense_web/components/layout/ui/shell/LayoutShell.tsx
index 346e3fa9e..2fca68c1e 100644
--- a/surfsense_web/components/layout/ui/shell/LayoutShell.tsx
+++ b/surfsense_web/components/layout/ui/shell/LayoutShell.tsx
@@ -410,7 +410,7 @@ export function LayoutShell({
 							pageUsage={pageUsage}
 							theme={theme}
 							setTheme={setTheme}
-							className={cn(
+						className={cn(
 								"flex shrink-0 transition-[border-radius] duration-200",
 								anySlideOutOpen ? "rounded-l-xl delay-0" : "rounded-xl delay-150"
 							)}
diff --git a/surfsense_web/components/layout/ui/sidebar/SidebarSlideOutPanel.tsx b/surfsense_web/components/layout/ui/sidebar/SidebarSlideOutPanel.tsx
index 47c6c2b4a..79d27a1ac 100644
--- a/surfsense_web/components/layout/ui/sidebar/SidebarSlideOutPanel.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/SidebarSlideOutPanel.tsx
@@ -90,15 +90,14 @@ export function SidebarSlideOutPanel({
 					/>
 
 					{/* Panel extending from sidebar's right edge, flush with the wrapper border */}
-					<motion.div
-						style={{ width }}
-						initial={{ x: -width }}
-						animate={{ x: 0 }}
-						exit={{ x: -width }}
-						transition={{ type: "tween", duration: 0.2, ease: [0.4, 0, 0.2, 1] }}
-						className="absolute z-20 overflow-hidden"
-						style={{ width, left: "100%", top: -1, bottom: -1 }}
-					>
+				<motion.div
+					initial={{ width: 0 }}
+					animate={{ width }}
+					exit={{ width: 0 }}
+					transition={{ type: "tween", duration: 0.2, ease: [0.4, 0, 0.2, 1] }}
+					className="absolute z-20 overflow-hidden"
+					style={{ left: "100%", top: -1, bottom: -1 }}
+				>
 						<div
 							style={{ width }}
 							className="h-full bg-sidebar text-sidebar-foreground flex flex-col select-none border rounded-r-xl shadow-xl"