diff --git a/website/src/components/CodeExample.module.css b/website/src/components/CodeExample.module.css index caee5e3..0a34b22 100644 --- a/website/src/components/CodeExample.module.css +++ b/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; } diff --git a/website/src/components/CodeExample.tsx b/website/src/components/CodeExample.tsx index 7fb94e6..d10231c 100644 --- a/website/src/components/CodeExample.tsx +++ b/website/src/components/CodeExample.tsx @@ -10,23 +10,25 @@ type CodeExampleProps = { export default function CodeExample({ code, height = "100%" }: CodeExampleProps) { return ( -
- +
+
+ +
); }