keep pull to refresh for safari (#1168)

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"