🐛 Fix touchpad swipe back/forward #4246

This prevents the browser to take over the trackbad swipe gesture both
for the dashboard and the workspace.

At an early attempt I did get the code to work only for the workspace,
but it is too unreliable and I could every now and then get it to misbehave.

I believe it is better to be safe and always prevent the browser from
going back/forth, regardless of workspace/dashboard.

Signed-off-by: Dalai Felinto <dalai@blender.org>

CHANGES.md

@@ -27,6 +27,7 @@
 - Fix problem when creating a layout from an existing layout [Taiga #11554](https://tree.taiga.io/project/penpot/issue/11554)
 - Fix title button from Title Case to Capitalize [Taiga #11476](https://tree.taiga.io/project/penpot/issue/11476)
 - Fix Main component receives focus and is selected when using 'Show Main Component' [Taiga #11402](https://tree.taiga.io/project/penpot/issue/11402)
+- Fix touchpad swipe leading to navigating back/forth [GitHub #4246](https://github.com/penpot/penpot/issues/4246)
 
 ## 2.8.0
 

frontend/src/app/main/ui.cljs

@@ -28,6 +28,7 @@
    [app.main.ui.onboarding.team-choice :refer [onboarding-team-modal]]
    [app.main.ui.releases :refer [release-notes-modal]]
    [app.main.ui.static :as static]
+   [app.util.dom :as dom]
    [app.util.i18n :refer [tr]]
    [app.util.theme :as theme]
    [beicon.v2.core :as rx]
@@ -362,6 +363,8 @@
     ;; initialize themes
     (theme/use-initialize profile)
 
+    (dom/prevent-browser-gesture-navigation!)
+
     [:& (mf/provider ctx/current-route) {:value route}
      [:& (mf/provider ctx/current-profile) {:value profile}
       (if edata

frontend/src/app/util/dom.cljs

@@ -891,3 +891,12 @@
 (defn last-child
   [^js node]
   (.. node -lastChild))
+
+(defn prevent-browser-gesture-navigation!
+  []
+  ;; Prevent the browser from interpreting trackpad horizontal swipe as back/forth
+  ;;
+  ;; In theory We could disable this only for the workspace. However gets too unreliable.
+  ;; It is better to be safe and disable for the dashboard as well.
+  (set! (.. js/document -documentElement -style -overscrollBehaviorX) "none")
+  (set! (.. js/document -body -style -overscrollBehaviorX) "none"))