fix: uploader layout

src/lib/components/visual/Uploader.svelte

@@ -5,15 +5,23 @@
 		files: FileList | undefined;
 	}
 
+	let fileInput = $state<HTMLInputElement>();
+
 	let { files = $bindable() }: Props = $props();
+
+	const upload = () => {
+		if (!fileInput) return;
+		fileInput.click();
+	};
 </script>
 
-<div
-	class="flex items-center justify-center flex-col border-2 border-solid border-foreground rounded-xl w-full max-w-screen-lg h-80"
+<button
+	onclick={upload}
+	class="flex items-center justify-center cursor-pointer flex-col border-2 border-solid border-foreground rounded-xl px-4 py-2 w-full h-full"
 >
 	<Upload />
 	<h2>Drop or click to upload files</h2>
 	<p class="text-foreground-muted">the</p>
-</div>
+</button>
 
-<input type="file" class="hidden" bind:files />
+<input type="file" class="hidden" bind:files bind:this={fileInput} />

src/routes/+page.svelte

@@ -5,7 +5,9 @@
 </script>
 
 <div class="flex items-center justify-center h-full">
-	<Uploader bind:files />
+	<div class="w-full max-w-screen-lg h-80">
+		<Uploader bind:files />
+	</div>
 </div>
 
 <style>