fix landing (#844)

fix blooms

apps/landing/src/components/AppEmbed.tsx

@@ -10,25 +10,18 @@ const AppEmbed = () => {
 	const iFrame = useRef<HTMLIFrameElement>(null);
 	const window = getWindow()!;
 
-	function handleResize() {
-		if (window.innerWidth < 1000) {
-			setForceImg(true);
-		} else if (forceImg) {
-			setForceImg(false);
-		}
-	}
-
 	useEffect(() => {
+		function handleResize() {
+			if (window.innerWidth < 1000) {
+				setForceImg(true);
+			} else if (forceImg) {
+				setForceImg(false);
+			}
+		}
 		window.addEventListener('resize', handleResize);
 		handleResize();
 		return () => window.removeEventListener('resize', handleResize);
-	}, []);
-
-	function handleEvent(e: any) {
-		if (e.data === 'spacedrive-hello') {
-			if (!iFrameAppReady) setIframeAppReady(true);
-		}
-	}
+	}, [forceImg, window]);
 
 	// after five minutes kill the live demo
 	useEffect(() => {
@@ -39,17 +32,22 @@ const AppEmbed = () => {
 	}, []);
 
 	useEffect(() => {
+		function handleEvent(e: any) {
+			if (e.data === 'spacedrive-hello') {
+				if (!iFrameAppReady) setIframeAppReady(true);
+			}
+		}
 		window.addEventListener('message', handleEvent, false);
 		setShowApp(true);
 
 		return () => window.removeEventListener('message', handleEvent);
-	}, []);
+	}, [iFrameAppReady, window]);
 
 	useEffect(() => {
 		setTimeout(() => {
 			if (!iFrameAppReady) setImageFallback(true);
 		}, 1500);
-	}, []);
+	}, [iFrameAppReady]);
 
 	const renderImage = (imgFallback && !iFrameAppReady) || forceImg;
 
@@ -77,7 +75,7 @@ const AppEmbed = () => {
 							ref={iFrame}
 							referrerPolicy="origin-when-cross-origin"
 							className={clsx(
-								'shadow-iframe inset-center z-30  h-full w-full rounded-lg bg-gray-850',
+								'shadow-iframe inset-center z-30 h-full w-full rounded-lg bg-gray-850',
 								iFrameAppReady
 									? 'fade-in-app-embed opacity-100'
 									: 'ml-[-10000px] opacity-0'

apps/landing/src/components/NavBar.tsx

@@ -59,7 +59,7 @@ export default function NavBar() {
 	return (
 		<div
 			className={clsx(
-				'fixed z-[55] h-16 w-full border-b px-2 transition ',
+				'fixed z-[55] h-16 w-full border-b px-2 transition',
 				isAtTop
 					? 'border-transparent bg-transparent'
 					: 'border-gray-550 bg-gray-700/80 backdrop-blur'

apps/landing/src/components/PageWrapper.tsx

@@ -5,7 +5,7 @@ export default function PageWrapper({ children }: { children: React.ReactNode })
 	return (
 		<>
 			<NavBar />
-			<main className="dark z-10 m-auto max-w-[100rem] dark:bg-black dark:text-white">
+			<main className="dark z-10 m-auto max-w-[100rem] overflow-hidden dark:bg-black dark:text-white">
 				{children}
 			</main>
 			<Footer />