simplify templating, use flex for everything

src/lib/components/Footer.svelte

@@ -1,6 +1,4 @@
-<footer
-	class="footer footer-center p-4 bg-base-300 text-base-content absolute bottom-0 z-50 border-t border-primary"
->
+<footer class="footer footer-center p-4 bg-base-300 text-base-content border-t border-primary">
 	<aside>
 		<p>
 			Built with 💚 by <a

src/lib/components/NavBar.svelte

@@ -17,69 +17,63 @@
 	}
 </script>
 
-<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">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						class="h-5 w-5"
-						fill="none"
-						viewBox="0 0 24 24"
-						stroke="currentColor"
-					>
-						<path
-							stroke-linecap="round"
-							stroke-linejoin="round"
-							stroke-width="2"
-							d="M4 6h16M4 12h8m-8 6h16"
-						/>
-					</svg>
-				</div>
-				<ul
-					tabindex="-1"
-					class="menu menu-lg dropdown-content mt-3 z-10 p-2 shadow bg-base-300 rounded-box w-52"
+<div class="navbar bg-base-300 border-b border-primary">
+	<div class="flex-1 pr-2">
+		<div class="dropdown">
+			<div tabindex="-1" class="btn btn-ghost text-primary lg:hidden">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					class="h-5 w-5"
+					fill="none"
+					viewBox="0 0 24 24"
+					stroke="currentColor"
 				>
-					<li><a href="/thoughts" class="link-primary">Thoughts</a></li>
-					<li><a href="/poetry" class="link-primary">Poetry</a></li>
-					<li><a href="/projects" class="link-primary">Projects</a></li>
-					<li><a href="/services" class="link-primary">Services</a></li>
-				</ul>
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M4 6h16M4 12h8m-8 6h16"
+					/>
+				</svg>
 			</div>
-			<a class="link-primary text-xl" href="/">silentsilas</a>
-		</div>
-		<div class="lg:hidden flex-none gap-2">
-			<div class="form-control">
-				<input
-					type="text"
-					placeholder="Search"
-					class="input w-24 md:w-auto"
-					bind:value={searchQuery}
-					on:input={handleSearch}
-				/>
-			</div>
-		</div>
-		<div class="navbar-end hidden lg:flex">
-			<div class="form-control">
-				<input
-					type="text"
-					placeholder="Search"
-					class="input md:w-auto"
-					bind:value={searchQuery}
-					on:input={handleSearch}
-				/>
-			</div>
-			<ul class="menu menu-horizontal px-1">
+			<ul
+				tabindex="-1"
+				class="menu menu-lg dropdown-content mt-3 z-10 p-2 shadow bg-base-300 rounded-box w-52"
+			>
 				<li><a href="/thoughts" class="link-primary">Thoughts</a></li>
 				<li><a href="/poetry" class="link-primary">Poetry</a></li>
 				<li><a href="/projects" class="link-primary">Projects</a></li>
 				<li><a href="/services" class="link-primary">Services</a></li>
 			</ul>
 		</div>
+		<a class="link-primary text-xl" href="/">silentsilas</a>
+	</div>
+	<div class="lg:hidden flex-none gap-2">
+		<div class="form-control">
+			<input
+				type="text"
+				placeholder="Search"
+				class="input w-24 md:w-auto"
+				bind:value={searchQuery}
+				on:input={handleSearch}
+			/>
+		</div>
+	</div>
+	<div class="navbar-end hidden lg:flex">
+		<div class="form-control">
+			<input
+				type="text"
+				placeholder="Search"
+				class="input md:w-auto"
+				bind:value={searchQuery}
+				on:input={handleSearch}
+			/>
+		</div>
+		<ul class="menu menu-horizontal px-1">
+			<li><a href="/thoughts" class="link-primary">Thoughts</a></li>
+			<li><a href="/poetry" class="link-primary">Poetry</a></li>
+			<li><a href="/projects" class="link-primary">Projects</a></li>
+			<li><a href="/services" class="link-primary">Services</a></li>
+		</ul>
 	</div>
-
-	<slot />
-
-	<slot name="footer" />
 </div>

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

@@ -0,0 +1,17 @@
+<script>
+	import Footer from '$lib/components/Footer.svelte';
+	import NavBar from '$lib/components/NavBar.svelte';
+</script>
+
+<div
+	class="flex flex-col flex-1 overflow-auto fixed h-full w-screen bg-base-300"
+	style="overflow-x: hidden;"
+>
+	<NavBar></NavBar>
+
+	<div class="flex flex-1 overflow-auto">
+		<slot />
+	</div>
+
+	<Footer></Footer>
+</div>

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

@@ -23,7 +23,6 @@
 	}
 
 	.canvas {
-		margin-top: 69px;
-		margin-bottom: 53px;
+		max-width: 100vw;
 	}
 </style>