fix: toast fixes

toasts aren't as "jumpy" anymore, toasts can be different sizes (not affected by sizes of other toasts), derive icon/color

src/lib/components/functional/Dialog.svelte

@@ -33,8 +33,6 @@
 
 	let color = $derived(colors[type]);
 	let Icon = $derived(Icons[type]);
-
-	console.log(`ID: ${id}, type: ${type}`);
 </script>
 
 <div

src/lib/components/layout/Toasts.svelte

@@ -8,8 +8,12 @@
 	});
 </script>
 
-<div class="fixed bottom-28 md:bottom-0 right-0 p-4 space-y-4 z-50">
+<div
+	class="fixed bottom-28 md:bottom-0 right-0 p-4 flex flex-col-reverse gap-4 z-50"
+>
 	{#each toastList as { id, type, message, durations }}
-		<Toast {id} {type} {message} {durations} />
+		<div class="flex justify-end">
+			<Toast {id} {type} {message} {durations} />
+		</div>
 	{/each}
 </div>

src/lib/components/visual/Toast.svelte

@@ -23,19 +23,22 @@
 
 	let { id, type, message, durations }: Props = $props();
 
-	const color = {
+	const colors = {
 		success: "purple",
 		error: "red",
 		info: "blue",
 		warning: "pink",
-	}[type];
+	};
 
-	const Icon = {
+	const Icons = {
 		success: CheckIcon,
 		error: BanIcon,
 		info: InfoIcon,
 		warning: TriangleAlert,
-	}[type];
+	};
+
+	let color = $derived(colors[type]);
+	let Icon = $derived(Icons[type]);
 
 	// intentionally unused. this is so tailwind can generate the css for these colours as it doesn't detect if it's dynamically loaded
 	// this would lead to the colours not being generated in the final css file by tailwind
@@ -48,7 +51,7 @@
 </script>
 
 <div
-	class="flex items-center justify-between w-full max-w-sm p-4 gap-4 bg-accent-{color} border-accent-{color}-alt border-l-4 rounded-lg shadow-md"
+	class="flex items-center justify-between max-w-sm p-4 gap-4 bg-accent-{color} border-accent-{color}-alt border-l-4 rounded-lg shadow-md"
 	in:fly={{
 		duration: durations.enter,
 		easing: quintOut,
@@ -70,7 +73,7 @@
 		<p class="text-black font-normal">{message}</p>
 	</div>
 	<button
-		class="text-gray-600 hover:text-black"
+		class="text-gray-600 hover:text-black flex-shrink-0"
 		onclick={() => removeToast(id)}
 	>
 		<XIcon size="16" />

src/routes/about/+page.svelte

@@ -52,7 +52,6 @@
 		const cachedContribs = sessionStorage.getItem("ghContribs");
 		if (cachedContribs) {
 			ghContribs = JSON.parse(cachedContribs);
-			log(["about"], "loaded GitHub contributors from cache");
 			return;
 		}