Fix scrolling over code examples

This commit is contained in:
2025-02-22 23:56:47 -06:00
parent 9f1498b3ad
commit 26e9a7addf
3 changed files with 6 additions and 10 deletions
+2 -2
View File
@@ -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>
@@ -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; */
}
+3 -2
View File
@@ -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"