Size everything 100vh to 100dvh in browsers that support it

KittyCAD · Feb 10, 2024 · 1e08814 · 1e08814
1 parent 5ff801d
commit 1e08814
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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">