From 5d71e578393715d18cfde369f175bd55174b11c4 Mon Sep 17 00:00:00 2001
From: k00b <k00b@stacker.news>
Date: Mon, 18 Nov 2024 17:33:45 -0600
Subject: [PATCH] fix ptr interfering with layout container

---
 components/layout.js          | 22 ++++++++++------------
 components/pull-to-refresh.js | 25 ++++++++++++-------------
 2 files changed, 22 insertions(+), 25 deletions(-)

diff --git a/components/layout.js b/components/layout.js
index dc174dc2..e90f6ccf 100644
--- a/components/layout.js
+++ b/components/layout.js
@@ -15,18 +15,16 @@ export default function Layout ({
   return (
     <>
       {seo && <Seo sub={sub} item={item} user={user} />}
-      <PullToRefresh android> {/* android prop if true disables its native PTR */}
-        <Navigation sub={sub} />
-        {contain
-          ? (
-            <Container as='main' className={`px-sm-0 ${styles.contain}`}>
-              {children}
-            </Container>
-            )
-          : children}
-        {footer && <Footer links={footerLinks} />}
-        <NavFooter sub={sub} />
-      </PullToRefresh>
+      <Navigation sub={sub} />
+      {contain
+        ? (
+          <Container as={PullToRefresh} className={`px-sm-0 ${styles.contain}`}>
+            {children}
+          </Container>
+          )
+        : children}
+      {footer && <Footer links={footerLinks} />}
+      <NavFooter sub={sub} />
     </>
   )
 }
diff --git a/components/pull-to-refresh.js b/components/pull-to-refresh.js
index 28f2a823..64c7bbc7 100644
--- a/components/pull-to-refresh.js
+++ b/components/pull-to-refresh.js
@@ -4,7 +4,7 @@ import styles from './pull-to-refresh.module.css'
 
 const REFRESH_THRESHOLD = 50
 
-export default function PullToRefresh ({ children, android }) {
+export default function PullToRefresh ({ children, android, className }) {
   const router = useRouter()
   const [pullDistance, setPullDistance] = useState(0)
   const [isPWA, setIsPWA] = useState(false)
@@ -68,17 +68,16 @@ export default function PullToRefresh ({ children, android }) {
   }, [pullDistance])
 
   return (
-    <div>
-      <div
-        onTouchStart={handleTouchStart}
-        onTouchMove={handleTouchMove}
-        onTouchEnd={handleTouchEnd}
-      >
-        <p className={`${styles.pullMessage}`} style={{ top: `${Math.max(-20, Math.min(-20 + pullDistance / 2, 5))}px` }}>
-          {pullMessage}
-        </p>
-        {children}
-      </div>
-    </div>
+    <main
+      className={className}
+      onTouchStart={handleTouchStart}
+      onTouchMove={handleTouchMove}
+      onTouchEnd={handleTouchEnd}
+    >
+      <p className={`${styles.pullMessage}`} style={{ top: `${Math.max(-20, Math.min(-20 + pullDistance / 2, 5))}px` }}>
+        {pullMessage}
+      </p>
+      {children}
+    </main>
   )
 }