Spaces:
Runtime error
Runtime error
try to fix mobile scroll on space
Browse files- app/layout.tsx +1 -1
- app/page.tsx +1 -1
- assets/globals.css +2 -2
- components/modal/modal.tsx +2 -14
app/layout.tsx
CHANGED
|
@@ -44,7 +44,7 @@ export default function RootLayout({
|
|
| 44 |
}) {
|
| 45 |
return (
|
| 46 |
<html lang="en">
|
| 47 |
-
<Script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js" />
|
| 48 |
<body className={inter.className}>
|
| 49 |
<Providers>{children}</Providers>
|
| 50 |
</body>
|
|
|
|
| 44 |
}) {
|
| 45 |
return (
|
| 46 |
<html lang="en">
|
| 47 |
+
{/* <Script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.3.1/iframeResizer.contentWindow.min.js" /> */}
|
| 48 |
<body className={inter.className}>
|
| 49 |
<Providers>{children}</Providers>
|
| 50 |
</body>
|
app/page.tsx
CHANGED
|
@@ -5,7 +5,7 @@ import NoSSR from "@/components/no-ssr";
|
|
| 5 |
|
| 6 |
export default function Home() {
|
| 7 |
return (
|
| 8 |
-
<div className="pb-32">
|
| 9 |
<Header />
|
| 10 |
<NoSSR>
|
| 11 |
<Main />
|
|
|
|
| 5 |
|
| 6 |
export default function Home() {
|
| 7 |
return (
|
| 8 |
+
<div id="content" className="pb-32 h-screen overflow-auto">
|
| 9 |
<Header />
|
| 10 |
<NoSSR>
|
| 11 |
<Main />
|
assets/globals.css
CHANGED
|
@@ -2,8 +2,8 @@
|
|
| 2 |
@tailwind components;
|
| 3 |
@tailwind utilities;
|
| 4 |
|
| 5 |
-
body {
|
| 6 |
-
@apply bg-black
|
| 7 |
}
|
| 8 |
|
| 9 |
.loading-dots {
|
|
|
|
| 2 |
@tailwind components;
|
| 3 |
@tailwind utilities;
|
| 4 |
|
| 5 |
+
body, html {
|
| 6 |
+
@apply bg-black overflow-hidden
|
| 7 |
}
|
| 8 |
|
| 9 |
.loading-dots {
|
components/modal/modal.tsx
CHANGED
|
@@ -11,7 +11,7 @@ import {
|
|
| 11 |
import { useCollection } from "./useCollection";
|
| 12 |
import { Button } from "../button";
|
| 13 |
import { useUser } from "@/utils/useUser";
|
| 14 |
-
import { useKeyPressEvent
|
| 15 |
|
| 16 |
interface Props {
|
| 17 |
id: string;
|
|
@@ -51,22 +51,10 @@ export const Modal: React.FC<Props> = ({ id, onClose }) => {
|
|
| 51 |
return date.toLocaleDateString();
|
| 52 |
}, [collection?.createdAt]);
|
| 53 |
|
| 54 |
-
useUpdateEffect(() => {
|
| 55 |
-
if (collection?.id) {
|
| 56 |
-
document.body.style.overflow = "hidden";
|
| 57 |
-
document.documentElement.style.overflow = "hidden";
|
| 58 |
-
} else {
|
| 59 |
-
document.body.style.overflow = "unset";
|
| 60 |
-
document.documentElement.style.overflow = "unset";
|
| 61 |
-
document.documentElement.style.overflowX = "hidden";
|
| 62 |
-
document.body.style.overflowX = "hidden";
|
| 63 |
-
}
|
| 64 |
-
}, [collection]);
|
| 65 |
-
|
| 66 |
return (
|
| 67 |
<motion.div
|
| 68 |
onClick={onClose}
|
| 69 |
-
className="fixed top-0 w-screen h-screen left-0 bg-black/30 backdrop-blur-sm z-50 flex items-
|
| 70 |
initial={{ opacity: 0 }}
|
| 71 |
animate={{ opacity: 1 }}
|
| 72 |
exit={{ opacity: 0 }}
|
|
|
|
| 11 |
import { useCollection } from "./useCollection";
|
| 12 |
import { Button } from "../button";
|
| 13 |
import { useUser } from "@/utils/useUser";
|
| 14 |
+
import { useKeyPressEvent } from "react-use";
|
| 15 |
|
| 16 |
interface Props {
|
| 17 |
id: string;
|
|
|
|
| 51 |
return date.toLocaleDateString();
|
| 52 |
}, [collection?.createdAt]);
|
| 53 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 54 |
return (
|
| 55 |
<motion.div
|
| 56 |
onClick={onClose}
|
| 57 |
+
className="fixed top-0 w-screen h-screen left-0 bg-black/30 backdrop-blur-sm z-50 flex items-center justify-center p-6"
|
| 58 |
initial={{ opacity: 0 }}
|
| 59 |
animate={{ opacity: 1 }}
|
| 60 |
exit={{ opacity: 0 }}
|