src/routes/(app)/chapters/[chapterId]/puzzle/[puzzleId]/+page.svelte

@@ -22,12 +22,12 @@
 </script>
 
 <div class="flex h-full w-full flex-col justify-between gap-4">
-	<h1 class="text-xl font-bold">
+	<h2 class="text-xl font-bold">
 		{puzzle.name}
 		<span class="text-lg text-muted-foreground">({puzzle.scoreMax} points)</span>
-	</h1>
+	</h2>
 	<article
-		class="prose-invert prose-a:text-primary prose-a:hover:text-primary/80 prose-pre:rounded h-screen max-w-none overflow-y-auto font-fira"
+		class="prose-invert prose-a:text-primary prose-pre:rounded h-screen max-w-none overflow-y-auto break-normal font-fira"
 	>
 		<CopyCodeInjector>
 			{@html puzzle.content}

tailwind.config.js

@@ -4,7 +4,7 @@ import { fontFamily } from "tailwindcss/defaultTheme";
 const config = {
 	darkMode: ["class"],
 	content: ["./src/**/*.{html,js,svelte,ts}"],
-  safelist: ["dark"],
+	safelist: ["dark"],
 	theme: {
 		container: {
 			center: true,
@@ -67,6 +67,10 @@ const config = {
 			hoverOnlyWhenSupported: true
 		}
 	},
+	plugins: [
+		require('@tailwindcss/typography'),
+		require('@tailwindcss/forms'),
+	],
 };
 
 export default config;