Website: Replace 100vh with 100dvh to fix an "unscrollable" state on mobile devices (#1883)

adamziel · web-flow · commit 32ad5674e576 · 2024-10-10T16:48:11.000+02:00
diff --git a/packages/meta/src/mindmap/v1/style.css b/packages/meta/src/mindmap/v1/style.css
@@ -6,7 +6,7 @@ body {
 
 #mindmap {
 	width: 100vw;
-	height: 100vh;
+	height: 100dvh;
 	background: white;
 }
 
diff --git a/packages/playground/website/demos/index.html b/packages/playground/website/demos/index.html
@@ -9,7 +9,7 @@
 		}
 		body {
 			width: 100vw;
-			height: 100vh;
+			height: 100dvh;
 			padding: 20px;
 		}
 	</style>
diff --git a/packages/playground/website/demos/peer.html b/packages/playground/website/demos/peer.html
@@ -10,13 +10,13 @@
 		}
 		iframe {
 			width: 100vw;
-			height: 100vh;
+			height: 100dvh;
 			border: 0;
 		}
 	</style>
 </head>
 <body>
-	<iframe id="wp" style="width: 100vw; height: 100vh"></iframe>
+	<iframe id="wp" style="width: 100vw; height: 100dvh"></iframe>
 	<script type="module">
 		const { runDemo } = await import('./peer.ts');
 		const searchParams = new URLSearchParams(document.location.search);
diff --git a/packages/playground/website/demos/sync.html b/packages/playground/website/demos/sync.html
@@ -9,7 +9,7 @@
 		}
 		body {
 			width: 100vw;
-			height: 100vh;
+			height: 100dvh;
 			margin: 0;
 			padding: 0;
 			display: flex;
diff --git a/packages/playground/website/demos/time-traveling.html b/packages/playground/website/demos/time-traveling.html
@@ -9,7 +9,7 @@
 		}
 		body {
 			width: 100vw;
-			height: 100vh;
+			height: 100dvh;
 			margin: 0;
 			padding: 0;
 			display: flex;
diff --git a/packages/playground/website/src/components/layout/style.module.css b/packages/playground/website/src/components/layout/style.module.css
@@ -18,7 +18,7 @@ body {
 .layout {
 	display: flex;
 	width: 100vw;
-	height: 100vh;
+	height: 100dvh;
 	overflow: hidden;
 }
 
@@ -80,7 +80,7 @@ body {
 	position: relative;
 	flex: 1 1 auto;
 	min-width: var(--site-view-min-width);
-	height: 100vh;
+	height: 100dvh;
 	border: 0px solid var(--site-manager-background-color);
 	transition: border-radius 300ms ease, border-width 300ms ease,
 		transform 300ms ease;
@@ -123,7 +123,7 @@ body {
 	content: '';
 	display: block;
 	width: 100%;
-	height: 100vh;
+	height: 100dvh;
 	background-color: transparent;
 	position: absolute;
 	top: 0;
diff --git a/packages/playground/website/src/components/site-manager/sidebar/style.module.css b/packages/playground/website/src/components/site-manager/sidebar/style.module.css
@@ -1,5 +1,5 @@
 .sidebar {
-	height: 100vh;
+	height: 100dvh;
 	display: flex;
 	flex-shrink: 0;
 	flex-direction: column;
diff --git a/packages/playground/website/src/components/site-manager/style.module.css b/packages/playground/website/src/components/site-manager/style.module.css
@@ -1,5 +1,5 @@
 .site-manager {
-	height: 100vh;
+	height: 100dvh;
 	overflow: hidden;
 	padding: var(--site-manager-border-width);
 	background-color: var(--site-manager-background-color);

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ body {`
`6`	`6`
`7`	`7`	`#mindmap {`
`8`	`8`	`width: 100vw;`
`9`		`- height: 100vh;`
	`9`	`+ height: 100dvh;`
`10`	`10`	`background: white;`
`11`	`11`	`}`
`12`	`12`
Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@`
`9`	`9`	`}`
`10`	`10`	`body {`
`11`	`11`	`width: 100vw;`
`12`		`- height: 100vh;`
	`12`	`+ height: 100dvh;`
`13`	`13`	`padding: 20px;`
`14`	`14`	`}`
`15`	`15`	`</style>`