diff --git a/src/app/(test)/test/layout.tsx b/src/app/(test)/test/layout.tsx
index beb4a02..a340148 100644
--- a/src/app/(test)/test/layout.tsx
+++ b/src/app/(test)/test/layout.tsx
@@ -12,7 +12,7 @@ export const metadata: Metadata = {
export default function RootLayout() {
return (
<html lang="en">
- <body className={inter.className}>
+ <body className={inter.className} style={{ margin: 0 }}>
<BgBanner />
</body>
</html>
diff --git a/src/components/BgBanner.tsx b/src/components/BgBanner.tsx
index 7420e46..7e97665 100644
--- a/src/components/BgBanner.tsx
+++ b/src/components/BgBanner.tsx
@@ -1,8 +1,8 @@
'use client';
-import { useEffect, useLayoutEffect, useState } from 'react';
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
-import styles from './testcomponents.module.css';
+// import styles from './testcomponents.module.css';
type BgBannerProps = {
debug?: boolean;
@@ -13,9 +13,15 @@ export default function TestBgBanner({ debug }: BgBannerProps) {
x: number;
y: number;
} | null>();
- useLayoutEffect(() => {
- window.scrollTo(0, 0);
- }, []);
+ const ref = useRef<HTMLDivElement>(null);
+
+ // useLayoutEffect(() => {
+ // const node = ref.current;
+
+ // if (node) {
+ // node.style.top = '50svh';
+ // }
+ // }, []);
useEffect(() => {
// TODO: debounce
@@ -35,21 +41,19 @@ export default function TestBgBanner({ debug }: BgBannerProps) {
return (
<>
- {/* <div
+ <div
+ ref={ref}
style={{
- display: 'flex',
- alignItems: 'center',
- top: '50svh',
- transform: 'translateY(50%)',
+ position: 'absolute',
+ top: 'calc(50svh - 200px)',
height: 400,
width: '100%',
- margin: 0,
background: 'red',
}}
>
test
- </div> */}
- <div className={styles['bg-banner']} />
+ </div>
+ {/* <div className={styles['bg-banner']} /> */}
{debug ? (
<div>
{orientation?.x || 0}, {orientation?.y || 0}