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,23 +10,25 @@ type CodeExampleProps = {
 
 export default function CodeExample({ code, height = "100%" }: CodeExampleProps) {
     return (
-        <div className={styles.editorContainer}>
+        <div className={styles.editorWrapper}>
-            <Editor
+            <div className={styles.editorContainer}>
-                height={height}
+                <Editor
-                defaultLanguage="typescript"
+                    height={height}
-                defaultValue={code}
+                    defaultLanguage="typescript"
-                theme="vs-dark"
+                    defaultValue={code}
-                options={{
+                    theme="vs-dark"
-                    readOnly: true,
+                    options={{
-                    minimap: { enabled: false },
+                        readOnly: true,
-                    fontSize: 14,
+                        minimap: { enabled: false },
-                    lineNumbers: 'on',
+                        fontSize: 14,
-                    scrollBeyondLastLine: false,
+                        lineNumbers: 'on',
-                    roundedSelection: false,
+                        scrollBeyondLastLine: false,
-                    padding: { top: 16, bottom: 16 },
+                        roundedSelection: false,
-                    automaticLayout: true,
+                        padding: { top: 16, bottom: 16 },
-                }}
+                        automaticLayout: true,
-            />
+                    }}
+                />
+            </div>
         </div>
     );
 }