Updates

packages/desktop-client/src/components/mobile/budget/BudgetTable.jsx

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useRef, useState } from 'react';
+import React, { memo, useCallback, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSwipeable } from 'react-swipeable';
 
@@ -1702,25 +1702,30 @@ export function BudgetTable({
   const { t } = useTranslation();
   const { width } = useResponsive();
   const show3Cols = width >= 360;
-  const [borderStyles, setBorderStyles] = useState({});
   const swipeHandlers = useSwipeable({
     onSwipedLeft: onNextMonth,
     onSwipedRight: onPrevMonth,
     onSwiping: e => {
-      setBorderStyles({
-        borderLeft:
-          e.dir === 'Right'
-            ? `1px solid ${theme.budgetHeaderCurrentMonth}`
-            : undefined,
-        borderRight:
-          e.dir === 'Left'
-            ? `1px solid ${theme.tableBorderSelected}`
-            : undefined,
-      });
+      if (
+        e.event.currentTarget.style.borderLeft !== 'none' ||
+        e.event.currentTarget.style.borderRight !== 'none'
+      ) {
+        return;
+      }
+
+      e.event.currentTarget.style.borderLeft =
+        e.dir === 'Right'
+          ? `1px solid ${theme.tableBorderSelected}`
+          : undefined;
+
+      e.event.currentTarget.style.borderRight =
+        e.dir === 'Left' ? `1px solid ${theme.tableBorderSelected}` : undefined;
     },
-    onSwiped: () => {
-      setBorderStyles({});
+    onSwiped: e => {
+      e.event.currentTarget.style.borderLeft = 'none';
+      e.event.currentTarget.style.borderRight = 'none';
     },
+    preventScrollOnSwipe: true,
   });
 
   // let editMode = false; // neuter editMode -- sorry, not rewriting drag-n-drop right now
@@ -1800,7 +1805,6 @@ export function BudgetTable({
           style={{
             backgroundColor: theme.pageBackground,
             paddingBottom: MOBILE_NAV_HEIGHT,
-            ...borderStyles,
           }}
         >
           <UncategorizedButton />