From 1e08814b1b0b002bc6c798215ba5d8b9c57a7fb8 Mon Sep 17 00:00:00 2001
From: Frank Noirot <frank@kittycad.io>
Date: Sat, 10 Feb 2024 16:42:12 -0500
Subject: [PATCH] Size everything 100vh to 100dvh in browsers that support it

---
 src/routes/(sidebarLayout)/+layout.svelte              | 3 ++-
 src/routes/(sidebarLayout)/dashboard/+page.svelte      | 2 +-
 src/routes/(sidebarLayout)/view/[modelId]/+page.svelte | 2 +-
 src/routes/+page.svelte                                | 2 +-
 4 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/routes/(sidebarLayout)/+layout.svelte b/src/routes/(sidebarLayout)/+layout.svelte
index c3f1d86..49a0f1b 100644
--- a/src/routes/(sidebarLayout)/+layout.svelte
+++ b/src/routes/(sidebarLayout)/+layout.svelte
@@ -5,7 +5,7 @@
 	export let data: LayoutData
 </script>
 
-<div class="h-screen overflow-hidden flex flex-col">
+<div class="h-screen overflow-hidden flex flex-col" style="height: 100dvh;">
 	<div class="pane-layout">
 		<Sidebar user={data ? data.user : undefined} className="md:w-80" />
 		<main>
@@ -23,6 +23,7 @@
 
 	.pane-layout {
 		@apply h-screen overflow-hidden flex flex-col md:flex-row;
+		height: 100dvh;
 	}
 
 	main {
diff --git a/src/routes/(sidebarLayout)/dashboard/+page.svelte b/src/routes/(sidebarLayout)/dashboard/+page.svelte
index 8c8a7a2..bac1c56 100644
--- a/src/routes/(sidebarLayout)/dashboard/+page.svelte
+++ b/src/routes/(sidebarLayout)/dashboard/+page.svelte
@@ -10,7 +10,7 @@
 	let input = null as HTMLTextAreaElement | null
 </script>
 
-<section class="mx-4 lg:mx-auto min-h-screen flex flex-col justify-end">
+<section class="mx-4 lg:mx-auto min-h-screen flex flex-col justify-end" style="height: 100dvh">
 	<div class="max-w-2xl mx-auto mt-12 lg:mt-16">
 		<h1 class="text-4xl md:text-5xl mb-2">
 			Text-to-<span class="text-green">CAD</span>
diff --git a/src/routes/(sidebarLayout)/view/[modelId]/+page.svelte b/src/routes/(sidebarLayout)/view/[modelId]/+page.svelte
index 55c787c..f30e895 100644
--- a/src/routes/(sidebarLayout)/view/[modelId]/+page.svelte
+++ b/src/routes/(sidebarLayout)/view/[modelId]/+page.svelte
@@ -30,7 +30,7 @@
 	$: gltfUrl = `data:model/gltf+json;base64,${data.outputs ? data.outputs['source.gltf'] : ''}`
 </script>
 
-<section class="min-h-screen flex flex-col">
+<section class="min-h-screen flex flex-col" style="min-height: 100dvh">
 	{#if $navigating}
 		<div class="flex-1 flex flex-col justify-center items-center">
 			<p class="link-text mb-4">Loading your model</p>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 9ad2570..da88140 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -13,7 +13,7 @@
 	]
 </script>
 
-<main class="mx-2 md:mx-5 lg:mx-auto min-h-screen flex items-center">
+<main class="mx-2 md:mx-5 lg:mx-auto min-h-screen flex items-center" style="min-height: 100dvh">
 	<section class="mx-auto max-w-5xl flex-1">
 		<div class="grid grid-cols-1 md:grid-cols-3 gap-0 items-stretch min-h-[33vh]">
 			<h1 class="md:col-span-2 text-5xl md:text-7xl py-6 md:py-12 self-center px-2 md:px-4">