From 8484fcd54e347574ac86c8679443774356162f2e Mon Sep 17 00:00:00 2001
From: Sinclair Chen <abc.sinclair@gmail.com>
Date: Sun, 2 Oct 2022 09:22:43 -0700
Subject: [PATCH] Use media query instead of conditional render

---
 web/pages/embed/[username]/[contractSlug].tsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/web/pages/embed/[username]/[contractSlug].tsx b/web/pages/embed/[username]/[contractSlug].tsx
index 83cfb0f3..70148afe 100644
--- a/web/pages/embed/[username]/[contractSlug].tsx
+++ b/web/pages/embed/[username]/[contractSlug].tsx
@@ -79,12 +79,16 @@ export function ContractEmbed(props: EmbedProps) {
     creatorId: contract.creatorId,
   })
 
-  const { height = 0 } = useWindowSize()
-
-  return height < 250 ? (
-    <ContractCard contract={contract} className="h-screen" />
-  ) : (
-    <ContractSmolView {...props} />
+  // return (height < 250px) ? Card : SmolView
+  return (
+    <>
+      <div className="contents [@media(min-height:250px)]:hidden">
+        <ContractCard contract={contract} className="h-screen" />
+      </div>
+      <div className="hidden [@media(min-height:250px)]:contents">
+        <ContractSmolView {...props} />
+      </div>
+    </>
   )
 }