From abd883458df95ae671f2cc9212ad90281bbc7cdf Mon Sep 17 00:00:00 2001
From: Anish Sarkar <104695310+AnishSarkar22@users.noreply.github.com>
Date: Thu, 9 Apr 2026 17:37:31 +0530
Subject: [PATCH] refactor: update SidebarSlideOutPanel animation to use width
 instead of x for smoother transitions

---
 .../components/layout/ui/sidebar/SidebarSlideOutPanel.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/surfsense_web/components/layout/ui/sidebar/SidebarSlideOutPanel.tsx b/surfsense_web/components/layout/ui/sidebar/SidebarSlideOutPanel.tsx
index ed54e65aa..5195082cd 100644
--- a/surfsense_web/components/layout/ui/sidebar/SidebarSlideOutPanel.tsx
+++ b/surfsense_web/components/layout/ui/sidebar/SidebarSlideOutPanel.tsx
@@ -91,12 +91,12 @@ export function SidebarSlideOutPanel({
 
 					{/* Panel extending from sidebar's right edge, flush with the wrapper border */}
 					<motion.div
-						style={{ width, left: "100%", top: -1, bottom: -1 }}
-						initial={{ x: -width }}
-						animate={{ x: 0 }}
-						exit={{ x: -width }}
+						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 }}