feat: Prevent scroll capture in Monaco Editor with wrapper and CSS

website/src/components/CodeExample.module.css

@@ -1,9 +1,20 @@
+.editorWrapper {
+    position: relative;
+    width: 100%;
+    height: 100%;
+}
+
 .editorContainer {
     width: 100%;
     height: 100%;
-    /* min-height: 300px; */
     border-radius: 8px;
     overflow: hidden;
-    /* margin: 20px 0; */
     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;
 }

website/src/components/CodeExample.tsx

@@ -10,6 +10,7 @@ type CodeExampleProps = {
 
 export default function CodeExample({ code, height = "100%" }: CodeExampleProps) {
     return (
+        <div className={styles.editorWrapper}>
             <div className={styles.editorContainer}>
                 <Editor
                     height={height}
@@ -28,6 +29,7 @@ export default function CodeExample({ code, height = "100%" }: CodeExampleProps)
                     }}
                 />
             </div>
+        </div>
     );
 }