From 9f46aa93dd996cf074da86cfa55128c5410ab9ba Mon Sep 17 00:00:00 2001
From: Tyler Yu <tyleryy@uci.edu>
Date: Tue, 8 Oct 2024 20:09:37 -0700
Subject: [PATCH] feat: mobile view notch fix

---
 packages/web/src/components/Home/Home.jsx             | 4 ++--
 packages/web/src/components/Login/Login.jsx           | 4 ++--
 packages/web/src/components/Map/Map.css               | 4 ++--
 packages/web/src/components/ResultsBar/ResultsBar.jsx | 2 +-
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/packages/web/src/components/Home/Home.jsx b/packages/web/src/components/Home/Home.jsx
index c0b55e3..026bf4d 100644
--- a/packages/web/src/components/Home/Home.jsx
+++ b/packages/web/src/components/Home/Home.jsx
@@ -330,7 +330,7 @@ export default function Home() {
     >
       <Box
         w={"100vw"}
-        h={"100vh"}
+        h={"100dvh"}
         background={colorMode === "dark" ? "#1A1E22" : ""}
       >
         <Flex
@@ -815,4 +815,4 @@ export default function Home() {
       </Box>
     </DataContext.Provider>
   );
-}
+}
\ No newline at end of file
diff --git a/packages/web/src/components/Login/Login.jsx b/packages/web/src/components/Login/Login.jsx
index 7638b6a..a55c92b 100644
--- a/packages/web/src/components/Login/Login.jsx
+++ b/packages/web/src/components/Login/Login.jsx
@@ -19,7 +19,7 @@ export default function Login() {
   return (
     <Stack
       width={"100vw"}
-      minH={"100vh"}
+      minH={"100dvh"}
       direction={{ base: "column", md: "row" }}
     >
       <Flex p={8} flex={1} align={"center"} justify={"center"}>
@@ -47,7 +47,7 @@ export default function Login() {
       <Flex flex={1}>
         <Image
           width="100%"
-          height="100vh"
+          height="100dvh"
           alt={"Login Image"}
           objectFit={"cover"}
           src={wallpaper}
diff --git a/packages/web/src/components/Map/Map.css b/packages/web/src/components/Map/Map.css
index 1ef85a6..1a182a0 100644
--- a/packages/web/src/components/Map/Map.css
+++ b/packages/web/src/components/Map/Map.css
@@ -3,7 +3,7 @@
 }
 
 .map-container {
-  height: 80vh;
+  height: 80dvh;
   width: 75vw;
   border-radius: 30px;
   z-index: 0;
@@ -12,7 +12,7 @@
 @media only screen and (max-width: 600px) {
   .map-container {
     border-radius: 0;
-    height: 83vh;
+    height: 83dvh;
     width: 100vw;
     z-index: 0;
   }
diff --git a/packages/web/src/components/ResultsBar/ResultsBar.jsx b/packages/web/src/components/ResultsBar/ResultsBar.jsx
index 23ba064..c60697e 100644
--- a/packages/web/src/components/ResultsBar/ResultsBar.jsx
+++ b/packages/web/src/components/ResultsBar/ResultsBar.jsx
@@ -101,7 +101,7 @@ export default function ResultsBar({
     <Box
       paddingX="5px"
       width={{ base: "90vw", md: "21vw" }}
-      height="80vh"
+      height="80dvh"
       overflowY="scroll"
       overflowX="hidden"
     >