fix mobile toast, theming

frontend/src/routes/+layout.svelte

@@ -4,9 +4,31 @@
 	import NavBar from '$lib/components/layout/NavBar.svelte';
 	import { Toaster } from '$lib/components/ui/sonner/index.js';
 	import { authStore } from '$lib/stores/auth.svelte';
+	import { onMount } from 'svelte';
 
 	let { children } = $props();
 
+	// Default to 'top-center' (mobile-first approach)
+	let toasterPosition = $state<'top-center' | 'bottom-center'>('top-center');
+
+	function updateToasterPosition() {
+		// Use 640px (Tailwind's 'sm' breakpoint) to differentiate desktop and mobile
+		if (typeof window !== 'undefined' && window.innerWidth >= 768) {
+			toasterPosition = 'bottom-center';
+		} else {
+			toasterPosition = 'top-center';
+		}
+		console.log('Toaster position:', toasterPosition);
+	}
+
+	onMount(() => {
+		updateToasterPosition();
+		window.addEventListener('resize', updateToasterPosition);
+		return () => {
+			window.removeEventListener('resize', updateToasterPosition);
+		};
+	});
+
 	// Verify email address
 	async function verify_email() {
 		alert('Verifying email address...');
@@ -27,7 +49,7 @@
 </svelte:head>
 
 <NavBar />
-<Toaster position="bottom-center" />
+<Toaster position={toasterPosition} />
 
 <main class="pt-16">
 	{#if authStore.currentUser?.role === 'unverified_email'}