From 63855e07570801c4613b5a9b6d6330a2b8fd3bdb Mon Sep 17 00:00:00 2001
From: SohamBhattacharjee2003
 <125297948+SohamBhattacharjee2003@users.noreply.github.com>
Date: Wed, 8 Apr 2026 05:26:18 +0530
Subject: [PATCH] fix: use transform animation for sidebar slide-out panel

- Replace width animation with translateX for GPU acceleration
- Set fixed width on panel and animate x position instead
- Prevents layout recalculation on every animation frame
- Runs on compositor thread without triggering reflow
---
 .../layout/ui/sidebar/SidebarSlideOutPanel.tsx           | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

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