refac: changelog styling

Author: tjbck

src/lib/components/ChangelogModal.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import DOMPurify from 'dompurify';
+
 	import { onMount, getContext } from 'svelte';
 	import { Confetti } from 'svelte-confetti';
 
@@ -23,7 +25,7 @@
 	});
 </script>
 
-<Modal bind:show size="lg">
+<Modal bind:show size="xl">
 	<div class="px-5 pt-4 dark:text-gray-300 text-gray-700">
 		<div class="flex justify-between items-start">
 			<div class="text-xl font-semibold">
@@ -54,7 +56,7 @@
 	</div>
 
 	<div class=" w-full p-4 px-5 text-gray-700 dark:text-gray-100">
-		<div class=" overflow-y-scroll max-h-96 scrollbar-hidden">
+		<div class=" overflow-y-scroll max-h-[32rem] scrollbar-hidden">
 			<div class="mb-3">
 				{#if changelog}
 					{#each Object.keys(changelog) as version}
@@ -66,7 +68,7 @@
 							<hr class="border-gray-100 dark:border-gray-850 my-2" />
 
 							{#each Object.keys(changelog[version]).filter((section) => section !== 'date') as section}
-								<div class="">
+								<div class="w-full">
 									<div
 										class="font-semibold uppercase text-xs {section === 'added'
 											? 'text-white bg-blue-600'
@@ -81,13 +83,10 @@
 										{section}
 									</div>
 
-									<div class="my-2.5 px-1.5">
-										{#each Object.keys(changelog[version][section]) as item}
-											<div class="text-sm mb-2">
-												<div class="font-semibold uppercase">
-													{changelog[version][section][item].title}
-												</div>
-												<div class="mb-2 mt-1">{changelog[version][section][item].content}</div>
+									<div class="my-2.5 px-1.5 markdown-prose-sm !list-none !w-full !max-w-none">
+										{#each changelog[version][section] as entry}
+											<div class="my-2">
+												{@html DOMPurify.sanitize(entry?.raw)}
 											</div>
 										{/each}
 									</div>