diff --git a/commafeed-client/package-lock.json b/commafeed-client/package-lock.json
index 3ca6dd5f..965f2114 100644
--- a/commafeed-client/package-lock.json
+++ b/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",
diff --git a/commafeed-client/package.json b/commafeed-client/package.json
index b7d9b842..7e5634cc 100644
--- a/commafeed-client/package.json
+++ b/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",
diff --git a/commafeed-client/src/App.tsx b/commafeed-client/src/App.tsx
index 45d2393a..d66f26f8 100644
--- a/commafeed-client/src/App.tsx
+++ b/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() {
+ {/* 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 && }
>
diff --git a/commafeed-client/src/components/DisablePullToRefresh.tsx b/commafeed-client/src/components/DisablePullToRefresh.tsx
new file mode 100644
index 00000000..d8708103
--- /dev/null
+++ b/commafeed-client/src/components/DisablePullToRefresh.tsx
@@ -0,0 +1,15 @@
+import { Helmet } from "react-helmet"
+
+export const DisablePullToRefresh = () => {
+ return (
+
+
+
+ )
+}
diff --git a/commafeed-client/src/main.css b/commafeed-client/src/main.css
index 0fdc6fd7..e69de29b 100644
--- a/commafeed-client/src/main.css
+++ b/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;
-}
\ No newline at end of file
diff --git a/commafeed-client/src/main.tsx b/commafeed-client/src/main.tsx
index b7fa60c1..0f64f603 100644
--- a/commafeed-client/src/main.tsx
+++ b/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"