fix(Mobile): fix 100vh to 100dvh

Author: BenedictLang

next.config.js

@@ -37,6 +37,7 @@ const nextConfig = {
 		// The image optimization needs to be disabled in a static export
 		unoptimized: true,
 	},
+	distDir: 'build',
 	output: 'export',
 };
 

src/components/Layouts/Layout/Layout.module.scss

@@ -3,5 +3,5 @@
 .layoutContainer {
 	display: grid;
 	grid-template-rows: auto 1fr auto;
-	min-height: 100vh;
+	min-height: 100dvh;
 }

src/components/Layouts/LayoutFullscreen/LayoutFullscreen.module.scss

@@ -3,8 +3,8 @@
 .layoutContainer {
 	display: flex;
 	flex-direction: column;
-	min-height: 100vh;
-	height: 100vh;
+	min-height: 100dvh;
+	height: 100dvh;
 	width: 100%;
 }
 

src/components/Modal/Modal.module.scss

@@ -7,7 +7,7 @@
 	width: 100%;
 	height: 100%;
 	max-width: 100%;
-	max-height: 100vh;
+	max-height: 100dvh;
 	display: flex;
 	flex-direction: column;
 	justify-content: center;

src/components/Sections/Heros/Hero/Hero.module.scss

@@ -3,7 +3,7 @@
 .hero {
 	position: relative;
 	width: 100%;
-	min-height: 100vh;
+	min-height: 100dvh;
 
 	.content {
 		display: flex;
@@ -69,7 +69,7 @@
 	.hero {
 		.content {
 			flex-direction: row;
-			min-height: 100vh;
+			min-height: 100dvh;
 			.image {
 				display: block;
 				width: calc(370px + 4vw);

src/styles/pages/App.module.scss

@@ -3,7 +3,7 @@
 .webglContainer {
 	position: fixed;
 	width: 100%;
-	height: 100vh;
+	height: 100dvh;
 	z-index: -1;
 }
 

src/styles/pages/Blog.module.scss

@@ -24,7 +24,7 @@
 .tileSection {
 	background: $color-bg-transparent;
 	backdrop-filter: blur(10em);
-	height: 100vh;
+	height: 100dvh;
 }
 
 .description {

src/styles/pages/Home.module.scss

@@ -28,7 +28,7 @@
 	width: 100%;
 	background: $color-bg-transparent;
 	backdrop-filter: blur(10em);
-	min-height: 100vh;
+	min-height: 100dvh;
 
 	.aboutContent {
 		position: relative;