Fix the 'dancing header' problem on web

1 files changed, 8 insertions, 2 deletions

diff --git a/src/lib/hooks/useOnMainScroll.ts b/src/lib/hooks/useOnMainScroll.ts
index 782c4704b..12e42aca5 100644
--- a/src/lib/hooks/useOnMainScroll.ts
+++ b/src/lib/hooks/useOnMainScroll.ts
@@ -2,6 +2,9 @@ import {useState, useCallback, useRef} from 'react'
 import {NativeSyntheticEvent, NativeScrollEvent} from 'react-native'
 import {RootStoreModel} from 'state/index'
 import {s} from 'lib/styles'
+import {isDesktopWeb} from 'platform/detection'
+
+const DY_LIMIT = isDesktopWeb ? 30 : 10
 
 export type OnScrollCb = (
   event: NativeSyntheticEvent<NativeScrollEvent>,
@@ -20,9 +23,12 @@ export function useOnMainScroll(
         const dy = y - (lastY.current || 0)
         lastY.current = y
 
-        if (!store.shell.minimalShellMode && y > 10 && dy > 10) {
+        if (!store.shell.minimalShellMode && y > 10 && dy > DY_LIMIT) {
           store.shell.setMinimalShellMode(true)
-        } else if (store.shell.minimalShellMode && (y <= 10 || dy < -10)) {
+        } else if (
+          store.shell.minimalShellMode &&
+          (y <= 10 || dy < DY_LIMIT * -1)
+        ) {
           store.shell.setMinimalShellMode(false)
         }