fix: use 100dvh instead of 100vh to prevent mobile overflow

swiiny · Mar 24, 2024 · 9819390 · 9819390
1 parent fa3d2e2
commit 9819390
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 4 deletions.
diff --git a/packages/base/components/pages/home/HomePage/HomePage.module.scss b/packages/base/components/pages/home/HomePage/HomePage.module.scss
@@ -5,7 +5,7 @@
 	flex-direction: column;
 	justify-content: space-evenly;
 
-	height: 100vh;
+	height: 100dvh;
 
 	padding-top: 100px;
 

diff --git a/packages/mui/components/pages/home/HomePage/HomePage.tsx b/packages/mui/components/pages/home/HomePage/HomePage.tsx
@@ -12,7 +12,7 @@ const boxStyles = {
 	justifyContent: 'space-evenly',
 	paddingX: { xs: '15px', md: '32px', lg: '64px' },
 	paddingTop: '30px',
-	height: '100vh'
+	height: '100dvh'
 };
 
 const HomePage: FC<IHomePage> = () => {

diff --git a/packages/styled-components/components/pages/home/HomePage/HomePage.styles.ts b/packages/styled-components/components/pages/home/HomePage/HomePage.styles.ts
@@ -9,7 +9,7 @@ export const StyledMainContainer = styled.div`
 	flex-direction: column;
 	justify-content: space-evenly;
 
-	height: 100vh;
+	height: 100dvh;
 
 	padding-top: 32px;
 	padding-left: 15px;

diff --git a/packages/stylex/app/_components/home/HomePage/HomePage.tsx b/packages/stylex/app/_components/home/HomePage/HomePage.tsx
@@ -12,7 +12,7 @@ const styles = stylex.create({
 		flexDirection: 'column',
 		justifyContent: 'space-evenly',
 		alignItems: 'center',
-		height: '100svh',
+		height: '100dvh',
 		paddingTop: spacing.m,
 		paddingLeft: {
 			default: spacing['2xs'],