From 1bb03f4569fcdbf9a241d9ba9cc9c940c25024fb Mon Sep 17 00:00:00 2001
From: matteoscrugli <ma.scrugli@gmail.com>
Date: Tue, 23 Dec 2025 02:12:43 +0100
Subject: [PATCH] Optimize scroll performance
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Cache isMobile check in edge swipe detection to avoid layout thrashing
- Remove scroll-behavior: smooth from tab slider
- Remove -webkit-overflow-scrolling: touch

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/src/contexts/SidebarContext.tsx | 19 ++++++++++++-------
 frontend/src/styles/Layout.css           |  2 --
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/frontend/src/contexts/SidebarContext.tsx b/frontend/src/contexts/SidebarContext.tsx
index c4bc4dd..5e10129 100644
--- a/frontend/src/contexts/SidebarContext.tsx
+++ b/frontend/src/contexts/SidebarContext.tsx
@@ -121,23 +121,27 @@ export function SidebarProvider({ children }: { children: ReactNode }) {
     startX: 0,
     startY: 0,
     isEdgeSwipe: false,
+    isMobile: false,
   });
 
   useEffect(() => {
-    const isMobile = () => window.innerWidth <= 768;
+    // Check mobile once on mount and on resize
+    const updateMobile = () => {
+      swipeRef.current.isMobile = window.innerWidth <= 768;
+    };
+    updateMobile();
+    window.addEventListener('resize', updateMobile, { passive: true });
 
     const handleTouchStart = (e: TouchEvent) => {
-      if (!isMobile()) return;
+      if (!swipeRef.current.isMobile) return;
       const touch = e.touches[0];
       if (!touch) return;
 
       // Check if touch started near left edge
       if (touch.clientX <= EDGE_SWIPE_THRESHOLD) {
-        swipeRef.current = {
-          startX: touch.clientX,
-          startY: touch.clientY,
-          isEdgeSwipe: true,
-        };
+        swipeRef.current.startX = touch.clientX;
+        swipeRef.current.startY = touch.clientY;
+        swipeRef.current.isEdgeSwipe = true;
       } else {
         swipeRef.current.isEdgeSwipe = false;
       }
@@ -167,6 +171,7 @@ export function SidebarProvider({ children }: { children: ReactNode }) {
     document.addEventListener('touchend', handleTouchEnd, { passive: true });
 
     return () => {
+      window.removeEventListener('resize', updateMobile);
       document.removeEventListener('touchstart', handleTouchStart);
       document.removeEventListener('touchmove', handleTouchMove);
       document.removeEventListener('touchend', handleTouchEnd);
diff --git a/frontend/src/styles/Layout.css b/frontend/src/styles/Layout.css
index 34610c8..1b1fcce 100644
--- a/frontend/src/styles/Layout.css
+++ b/frontend/src/styles/Layout.css
@@ -96,10 +96,8 @@ label,
   max-width: 100%;
   overflow-x: auto;
   overflow-y: hidden;
-  -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
   -ms-overflow-style: none;
-  scroll-behavior: smooth;
 }
 
 .page-tabs-slider::-webkit-scrollbar,