Move conversion panel out of navbar

fixes jumping when switching between pages

src/lib/components/functional/Navbar.svelte

@@ -101,7 +101,7 @@
 {/snippet}
 
 <div bind:this={container}>
-	<Panel class="w-fit h-20 flex items-center gap-3 relative">
+	<Panel class="max-w-[796px] w-full h-20 flex items-center gap-3 relative">
 		{#if linkRects[selectedIndex]}
 			<div
 				class="absolute bg-panel-accented rounded-xl"

src/routes/+layout.svelte

@@ -1,10 +1,8 @@
 <script lang="ts">
 	import { beforeNavigate, goto } from "$app/navigation";
-	import { page } from "$app/stores";
 	import { PUB_HOSTNAME, PUB_PLAUSIBLE_URL } from "$env/static/public";
 	import { duration, fade } from "$lib/animation";
 	import featuredImage from "$lib/assets/VERT_Feature.webp";
-	import ConversionPanel from "$lib/components/functional/ConversionPanel.svelte";
 	import Navbar from "$lib/components/functional/Navbar.svelte";
 	import Footer from "$lib/components/visual/Footer.svelte";
 	import Logo from "$lib/components/visual/svg/Logo.svelte";
@@ -130,26 +128,7 @@
 
 	<!-- Desktop navbar -->
 	<div class="hidden md:flex p-8 w-screen justify-center z-50">
-		<div class="flex flex-col gap-4">
-			<Navbar {items} />
-			{#if items
-				.find((i) => i.url === "/convert")
-				?.activeMatch($page.url.pathname)}
-				<div
-					in:fade={{
-						duration: duration + 50,
-						delay: 50,
-						easing: quintOut,
-					}}
-					out:fade={{
-						duration,
-						easing: quintOut,
-					}}
-				>
-					<ConversionPanel />
-				</div>
-			{/if}
-		</div>
+		<Navbar {items} />
 	</div>
 
 	<div class="grid grid-rows-1 grid-cols-1 h-full">

src/routes/convert/+page.svelte

@@ -93,13 +93,36 @@
 	</Panel>
 {/snippet}
 
-<div class="w-full h-full flex justify-center">
+<div
+	class="flex justify-center items-center -mt-4 pb-8"
+	in:fade={{
+		duration,
+		easing: quintOut,
+	}}
+	out:fade={{
+		duration,
+		easing: quintOut,
+	}}
+>
+	<div class="max-w-[796px] w-full px-4 md:p-0">
+		<ConversionPanel />
+	</div>
+</div>
+
+<div
+	class="w-full h-full flex justify-center"
+	in:fade={{
+		duration,
+		easing: quintOut,
+	}}
+	out:fade={{
+		duration,
+		easing: quintOut,
+	}}
+>
 	<div
 		class="w-[794px] grid grid-cols-1 md:grid-cols-2 px-4 md:p-0 auto-rows-[240px] gap-4"
 	>
-		<div class="flex md:hidden">
-			<ConversionPanel />
-		</div>
 		{#each files.files as file, i (file.id)}
 			{#if files.files.length >= 2 && i === 1}
 				<Uploader class="w-full h-full" />