Merge pull request #42 from icssc/feat/mobile-view-notch

feat: mobile view notch fix
icssc · Nov 9, 2024 · 53cf82f · 53cf82f
2 parents 1ef3700 + 9f46aa9
commit 53cf82f
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 7 deletions.
diff --git 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
@@ -814,4 +814,4 @@ export default function Home() {
       </Box>
     </DataContext.Provider>
   );
-}
+}
diff --git 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
@@ -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
@@ -116,7 +116,7 @@ export default function ResultsBar({
     <Box
       paddingX="5px"
       width={{ base: "90vw", md: "21vw" }}
-      height="80vh"
+      height="80dvh"
       overflowY="scroll"
       overflowX="hidden"
       ref={resultsBarRef}