fix ptr interfering with layout container

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} />
-        <Navigation sub={sub} />
+      {contain
-        {contain
+        ? (
-          ? (
+          <Container as={PullToRefresh} className={`px-sm-0 ${styles.contain}`}>
-            <Container as='main' className={`px-sm-0 ${styles.contain}`}>
+            {children}
-              {children}
+          </Container>
-            </Container>
+          )
-            )
+        : children}
-          : children}
+      {footer && <Footer links={footerLinks} />}
-        {footer && <Footer links={footerLinks} />}
+      <NavFooter sub={sub} />
-        <NavFooter sub={sub} />
-      </PullToRefresh>
     </>
   )
 }

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>
+    <main
-      <div
+      className={className}
-        onTouchStart={handleTouchStart}
+      onTouchStart={handleTouchStart}
-        onTouchMove={handleTouchMove}
+      onTouchMove={handleTouchMove}
-        onTouchEnd={handleTouchEnd}
+      onTouchEnd={handleTouchEnd}
-      >
+    >
-        <p className={`${styles.pullMessage}`} style={{ top: `${Math.max(-20, Math.min(-20 + pullDistance / 2, 5))}px` }}>
+      <p className={`${styles.pullMessage}`} style={{ top: `${Math.max(-20, Math.min(-20 + pullDistance / 2, 5))}px` }}>
-          {pullMessage}
+        {pullMessage}
-        </p>
+      </p>
-        {children}
+      {children}
-      </div>
+    </main>
-    </div>
   )
 }