From 26e9a7addf40d424a56441b09d4b9f701aec9141 Mon Sep 17 00:00:00 2001
From: Jaron <jaron@fishhat.dev>
Date: Sat, 22 Feb 2025 23:56:47 -0600
Subject: [PATCH] Fix scrolling over code examples

---
 website/src/app/page.tsx                      | 4 ++--
 website/src/components/CodeExample.module.css | 7 +------
 website/src/components/CodeExample.tsx        | 5 +++--
 3 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/website/src/app/page.tsx b/website/src/app/page.tsx
index fda0a04..0421f48 100644
--- a/website/src/app/page.tsx
+++ b/website/src/app/page.tsx
@@ -27,7 +27,7 @@ export default function Home() {
                         </p>
                     </div>
                     <div className={styles.codeExample}>
-                        <CodeExample code={simpleExample} />
+                        <CodeExample code={simpleExample} noScroll={true} />
                     </div>
                 </div>
 
@@ -54,7 +54,7 @@ export default function Home() {
                 <div className={styles.hydrationSection}>
                     <div className={styles.hydrationContainer}>
                         <div className={styles.hydrationCode}>
-                            <CodeExample code={hydrationExample} height={260} />
+                            <CodeExample code={hydrationExample} height={260} noScroll={true} />
                         </div>
                         <div className={styles.hydrationText}>
                             <h2>Smart Hydration</h2>
diff --git a/website/src/components/CodeExample.module.css b/website/src/components/CodeExample.module.css
index 0a34b22..342f95e 100644
--- a/website/src/components/CodeExample.module.css
+++ b/website/src/components/CodeExample.module.css
@@ -11,10 +11,5 @@
     overflow: hidden;
     border: 1px solid #2d2d2d;
     /* Prevent scroll capture */
-    pointer-events: none;
-}
-
-/* Re-enable pointer events only for the Monaco Editor */
-.editorContainer :global(.monaco-editor) {
-    pointer-events: auto;
+    /* pointer-events: none; */
 }
diff --git a/website/src/components/CodeExample.tsx b/website/src/components/CodeExample.tsx
index d10231c..e51792c 100644
--- a/website/src/components/CodeExample.tsx
+++ b/website/src/components/CodeExample.tsx
@@ -6,12 +6,13 @@ import styles from './CodeExample.module.css';
 type CodeExampleProps = {
     code: string;
     height?: string | number;
+    noScroll?: boolean;
 }
 
-export default function CodeExample({ code, height = "100%" }: CodeExampleProps) {
+export default function CodeExample({ code, height = "100%", noScroll = false }: CodeExampleProps) {
     return (
         <div className={styles.editorWrapper}>
-            <div className={styles.editorContainer}>
+            <div className={styles.editorContainer} style={{ pointerEvents: noScroll ? 'none' : 'auto' }}>
                 <Editor
                     height={height}
                     defaultLanguage="typescript"