fix: use afterUpdate for KaTeX rendering instead of $effect

$effect with tick() wasn't reliably firing after {@html} rendered.
afterUpdate runs after every DOM update, ensuring latex images are
always replaced with KaTeX.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: andrewboldi

src/lib/components/ProblemDisplay.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { afterUpdate } from 'svelte';
 	import { renderLatexInContainer } from '$lib/utils/katex';
 
 	interface Props {
@@ -11,10 +12,9 @@
 	let { problemId, problemHtml, zenMode, textInvertFilter }: Props = $props();
 	let container: HTMLElement;
 
-	$effect(() => {
-		if (container && problemHtml) {
-			// Wait for {@html} to render, then replace latex images
-			requestAnimationFrame(() => renderLatexInContainer(container));
+	afterUpdate(() => {
+		if (container) {
+			renderLatexInContainer(container);
 		}
 	});
 </script>

src/lib/components/SolutionDisplay.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { afterUpdate } from 'svelte';
 	import { renderLatexInContainer } from '$lib/utils/katex';
 
 	interface Props {
@@ -9,9 +10,9 @@
 	let { solutionHtml, textInvertFilter }: Props = $props();
 	let container: HTMLElement;
 
-	$effect(() => {
-		if (container && solutionHtml) {
-			requestAnimationFrame(() => renderLatexInContainer(container));
+	afterUpdate(() => {
+		if (container) {
+			renderLatexInContainer(container);
 		}
 	});
 </script>