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} />
       {contain
         ? (
-            <Container as='main' className={`px-sm-0 ${styles.contain}`}>
+          <Container as={PullToRefresh} className={`px-sm-0 ${styles.contain}`}>
             {children}
           </Container>
           )
         : children}
       {footer && <Footer links={footerLinks} />}
       <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,8 +68,8 @@ export default function PullToRefresh ({ children, android }) {
   }, [pullDistance])
 
   return (
-    <div>
-      <div
+    <main
+      className={className}
       onTouchStart={handleTouchStart}
       onTouchMove={handleTouchMove}
       onTouchEnd={handleTouchEnd}
@@ -78,7 +78,6 @@ export default function PullToRefresh ({ children, android }) {
         {pullMessage}
       </p>
       {children}
-      </div>
-    </div>
+    </main>
   )
 }