start mobile upload page

src/lib/components/functional/ConversionPanel.svelte

@@ -5,18 +5,18 @@
 	import Dropdown from "./Dropdown.svelte";
 </script>
 
-<Panel class="w-full h-20 flex items-center justify-between">
-	<div class="flex items-center gap-2.5">
+<Panel class="w-full h-auto flex items-center justify-between flex-col md:flex-row gap-4">
+	<div class="flex items-center flex-col md:flex-row gap-2.5 max-md:w-full">
 		<button
 			onclick={() => files.convertAll()}
-			class="btn highlight flex gap-3"
+			class="btn highlight flex gap-3 max-md:w-full"
 			disabled={!files.ready}
 		>
 			<RefreshCw size="24" />
 			<p>Convert all</p>
 		</button>
 		<button
-			class="btn flex gap-3"
+			class="btn flex gap-3 max-md:w-full"
 			disabled={!files.ready || !files.results}
 			onclick={() => files.downloadAll()}
 		>
@@ -24,9 +24,10 @@
 			<p>Download all as .zip</p>
 		</button>
 	</div>
+	<div class="w-full bg-separator h-0.5 flex md:hidden"></div>
 	<div class="flex items-center gap-2">
 		{#if files.requiredConverters.length === 1}
-			<p class="whitespace-nowrap">Set all to</p>
+			<p class="whitespace-nowrap text-xl md:text-base">Set all to</p>
 			<Dropdown
 				onselect={(r) => files.files.forEach((f) => {
 					f.to = r;

src/routes/+layout.svelte

@@ -131,7 +131,7 @@
 
 	<!-- Desktop navbar -->
 	<div class="hidden md:flex p-8 w-screen justify-center z-50">
-		<div class="flex flex-col justify-center items-center gap-4">
+		<div class="flex flex-col gap-4">
 			<Navbar {items} />
 			{#if items
 				.find((i) => i.url === "/convert")
@@ -263,6 +263,7 @@
 							end: 1.05,
 						},
 					}}
+					class="w-full"
 				>
 					<ConversionPanel />
 				</div>

src/routes/+page.svelte

@@ -40,7 +40,7 @@
 					</p>
 				</div>
 				<div
-					class="flex-grow w-11/12 md:w-full h-72 md:h-full blur-in"
+					class="flex-grow w-11/12 md:w-full h-72 blur-in"
 					style:--delay="60ms"
 				>
 					<Uploader class="w-full h-full" />

src/routes/convert/+page.svelte

@@ -94,8 +94,7 @@
 
 <div class="w-full h-full flex justify-center">
 	<div
-		class="w-[794px] grid"
-		style="grid-template-columns: repeat(2, 1fr); grid-auto-rows: 240px; gap: 16px"
+		class="w-[794px] grid grid-cols-1 md:grid-cols-2 px-4 md:p-0 auto-rows-[240px] gap-4"
 	>
 		{#each files.files as file, i (file.id)}
 			{#if files.files.length >= 2 && i === 1}