keep pull to refresh for safari (#1168)

commafeed-client/package-lock.json

@@ -30,6 +30,7 @@
         "react": "^18.2.0",
         "react-async-hook": "^4.0.0",
         "react-contexify": "^6.0.0",
+        "react-device-detect": "^2.2.3",
         "react-dom": "^18.3.1",
         "react-draggable": "^4.4.6",
         "react-ga4": "^2.1.0",
@@ -7653,6 +7654,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/react-device-detect": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-device-detect/-/react-device-detect-2.2.3.tgz",
+      "integrity": "sha512-buYY3qrCnQVlIFHrC5UcUoAj7iANs/+srdkwsnNjI7anr3Tt7UY6MqNxtMLlr0tMBied0O49UZVK8XKs3ZIiPw==",
+      "dependencies": {
+        "ua-parser-js": "^1.0.33"
+      },
+      "peerDependencies": {
+        "react": ">= 0.14.0",
+        "react-dom": ">= 0.14.0"
+      }
+    },
     "node_modules/react-dom": {
       "version": "18.3.1",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
@@ -9178,6 +9191,28 @@
         "node": ">=14.17"
       }
     },
+    "node_modules/ua-parser-js": {
+      "version": "1.0.38",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-1.0.38.tgz",
+      "integrity": "sha512-Aq5ppTOfvrCMgAPneW1HfWj66Xi7XL+/mIy996R1/CLS/rcyJQm6QZdsKrUeivDFQ+Oc9Wyuwor8Ze8peEoUoQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/ua-parser-js"
+        },
+        {
+          "type": "paypal",
+          "url": "https://paypal.me/faisalman"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/faisalman"
+        }
+      ],
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ufo": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.3.2.tgz",

commafeed-client/package.json

@@ -36,6 +36,7 @@
     "react": "^18.2.0",
     "react-async-hook": "^4.0.0",
     "react-contexify": "^6.0.0",
+    "react-device-detect": "^2.2.3",
     "react-dom": "^18.3.1",
     "react-draggable": "^4.4.6",
     "react-ga4": "^2.1.0",

commafeed-client/src/App.tsx

@@ -8,6 +8,7 @@ import { redirectTo } from "app/redirect/slice"
 import { reloadServerInfos } from "app/server/thunks"
 import { useAppDispatch, useAppSelector } from "app/store"
 import { categoryUnreadCount } from "app/utils"
+import { DisablePullToRefresh } from "components/DisablePullToRefresh"
 import { ErrorBoundary } from "components/ErrorBoundary"
 import { Header } from "components/header/Header"
 import { Tree } from "components/sidebar/Tree"
@@ -29,6 +30,7 @@ import { PasswordRecoveryPage } from "pages/auth/PasswordRecoveryPage"
 import { RegistrationPage } from "pages/auth/RegistrationPage"
 import { WelcomePage } from "pages/WelcomePage"
 import React, { useEffect } from "react"
+import { isSafari } from "react-device-detect"
 import ReactGA from "react-ga4"
 import { Helmet } from "react-helmet"
 import { HashRouter, Navigate, Route, Routes, useLocation, useNavigate } from "react-router-dom"
@@ -193,6 +195,11 @@ export function App() {
                     <RedirectHandler />
                     <AppRoutes />
                     <CustomCode />
+                    {/* disable pull-to-refresh as it messes with vertical scrolling
+                        safari behaves weirdly when overscroll-behavior is set to none so we disable it only for other browsers
+                        https://github.com/Athou/commafeed/issues/1168
+                    */}
+                    {!isSafari && <DisablePullToRefresh />}
                 </HashRouter>
             </>
         </Providers>

commafeed-client/src/components/DisablePullToRefresh.tsx

@@ -0,0 +1,15 @@
+import { Helmet } from "react-helmet"
+
+export const DisablePullToRefresh = () => {
+    return (
+        <Helmet>
+            <style type="text/css">
+                {`
+                    html, body {
+                        overscroll-behavior: none;
+                    }
+                `}
+            </style>
+        </Helmet>
+    )
+}

commafeed-client/src/main.css

@@ -1,4 +0,0 @@
-html, body {
-    /* disable pull-to-refresh on mobile as it messes with vertical scrolling */
-    overscroll-behavior: none;
-}

commafeed-client/src/main.tsx

@@ -3,7 +3,6 @@ import "@mantine/core/styles.css"
 import "@mantine/notifications/styles.css"
 import "@mantine/spotlight/styles.css"
 import "react-contexify/ReactContexify.css"
-import "main.css"
 import { App } from "App"
 import { store } from "app/store"
 import dayjs from "dayjs"