moar styling fixes to hopefully fix issue with chromium android

src/lib/components/Footer.svelte

@@ -1,5 +1,5 @@
 <footer
-	class="footer footer-center p-4 bg-base-300 text-base-content sticky bottom-0 z-50 border-t border-primary"
+	class="footer footer-center p-4 bg-base-300 text-base-content absolute bottom-0 z-50 border-t border-primary"
 >
 	<aside>
 		<p>

src/lib/components/NavBar.svelte

@@ -17,8 +17,8 @@
 	}
 </script>
 
-<div class="flex flex-col h-screen">
-	<div class="navbar bg-base-300 sticky top-0 z-50 border-b border-primary">
+<div class="flex flex-col h-screen w-screen">
+	<div class="navbar bg-base-300 absolute top-0 z-50 border-b border-primary">
 		<div class="flex-1 pr-2">
 			<div class="dropdown">
 				<div tabindex="-1" class="btn btn-ghost text-primary lg:hidden">

src/lib/components/scenes/app/CanvasContainer.svelte

@@ -7,7 +7,11 @@
 	}
 </script>
 
-<div class="canvas" on:contextmenu|preventDefault={preventRightClick} role="application">
+<div
+	class="canvas flex flex-1"
+	on:contextmenu|preventDefault={preventRightClick}
+	role="application"
+>
 	<Canvas>
 		<slot />
 	</Canvas>
@@ -19,12 +23,7 @@
 	}
 
 	.canvas {
-		width: 100%;
-		height: 100%;
-		background: rgb(0, 36, 6);
-		background: linear-gradient(180deg, rgba(0, 36, 6, 1) 0%, rgba(0, 0, 0, 1) 100%);
-		position: absolute;
-		justify-content: center;
-		align-items: center;
+		margin-top: 69px;
+		margin-bottom: 53px;
 	}
 </style>

src/lib/components/scenes/app/Overlay.svelte

@@ -10,5 +10,6 @@
 		transform: translate(-50%, -50%);
 		display: flex;
 		flex-direction: column;
+		z-index: 100;
 	}
 </style>