feat(quests): improve 3d island styling

fix(test): fix context image not appearing on test screen

src/components/RenderQuestionText.tsx

@@ -1,16 +1,76 @@
+import { Component, type ReactNode } from "react";
 import { BlockMath, InlineMath } from "react-katex";
 
+// ─── Error boundary ───────────────────────────────────────────────────────────
+// react-katex throws synchronously during render for invalid LaTeX, so a class
+// error boundary is the only reliable way to catch it.
+
+interface MathErrorBoundaryProps {
+  raw: string; // the original LaTeX string, shown as fallback
+  children: ReactNode;
+}
+
+interface MathErrorBoundaryState {
+  failed: boolean;
+}
+
+export class MathErrorBoundary extends Component<
+  MathErrorBoundaryProps,
+  MathErrorBoundaryState
+> {
+  state: MathErrorBoundaryState = { failed: false };
+
+  static getDerivedStateFromError(): MathErrorBoundaryState {
+    return { failed: true };
+  }
+
+  render() {
+    if (this.state.failed) {
+      return (
+        <span
+          title={`Could not render: ${this.props.raw}`}
+          style={{
+            fontFamily: "monospace",
+            background: "rgba(239,68,68,0.08)",
+            border: "1px solid rgba(239,68,68,0.3)",
+            borderRadius: 4,
+            padding: "0 4px",
+            color: "#f87171",
+            fontSize: "0.9em",
+          }}
+        >
+          {this.props.raw}
+        </span>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+// ─── Renderer ─────────────────────────────────────────────────────────────────
+
 export const renderQuestionText = (text: string) => {
-  const parts = text.split(/(\$\$.*?\$\$|\$.*?\$)/g);
+  if (!text) return null;
+  const parts = text.split(/(\$\$.*?\$\$|\$.*?\$)/gs);
 
   return (
     <>
       {parts.map((part, index) => {
         if (part.startsWith("$$")) {
-          return <BlockMath key={index}>{part.slice(2, -2)}</BlockMath>;
+          const latex = part.slice(2, -2);
+          return (
+            <MathErrorBoundary key={index} raw={part}>
+              <BlockMath>{latex}</BlockMath>
+            </MathErrorBoundary>
+          );
         }
         if (part.startsWith("$")) {
-          return <InlineMath key={index}>{part.slice(1, -1)}</InlineMath>;
+          const latex = part.slice(1, -1);
+          return (
+            <MathErrorBoundary key={index} raw={part}>
+              <InlineMath>{latex}</InlineMath>
+            </MathErrorBoundary>
+          );
         }
         return <span key={index}>{part}</span>;
       })}