Website: Replace 100vh with 100dvh

On iPhones, 100vh may exceed the actual viewport size. Safari viewport height varies as you scroll the page. There's a special `dvh` unit that represents the current height of the viewport so I'm switching all vh to dvh.
WordPress · Oct 10, 2024 · d6eb481 · d6eb481
1 parent ccb5bf8
commit d6eb481
Show file tree

Hide file tree

Showing 8 changed files with 11 additions and 11 deletions.
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);