mirror of
https://github.com/jaronpate/unicord.git
synced 2026-10-18 21:47:40 +00:00
Fix scrolling over code examples
This commit is contained in:
@@ -27,7 +27,7 @@ export default function Home() {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.codeExample}>
|
<div className={styles.codeExample}>
|
||||||
<CodeExample code={simpleExample} />
|
<CodeExample code={simpleExample} noScroll={true} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -54,7 +54,7 @@ export default function Home() {
|
|||||||
<div className={styles.hydrationSection}>
|
<div className={styles.hydrationSection}>
|
||||||
<div className={styles.hydrationContainer}>
|
<div className={styles.hydrationContainer}>
|
||||||
<div className={styles.hydrationCode}>
|
<div className={styles.hydrationCode}>
|
||||||
<CodeExample code={hydrationExample} height={260} />
|
<CodeExample code={hydrationExample} height={260} noScroll={true} />
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.hydrationText}>
|
<div className={styles.hydrationText}>
|
||||||
<h2>Smart Hydration</h2>
|
<h2>Smart Hydration</h2>
|
||||||
|
|||||||
@@ -11,10 +11,5 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border: 1px solid #2d2d2d;
|
border: 1px solid #2d2d2d;
|
||||||
/* Prevent scroll capture */
|
/* Prevent scroll capture */
|
||||||
pointer-events: none;
|
/* pointer-events: none; */
|
||||||
}
|
|
||||||
|
|
||||||
/* Re-enable pointer events only for the Monaco Editor */
|
|
||||||
.editorContainer :global(.monaco-editor) {
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -6,12 +6,13 @@ import styles from './CodeExample.module.css';
|
|||||||
type CodeExampleProps = {
|
type CodeExampleProps = {
|
||||||
code: string;
|
code: string;
|
||||||
height?: string | number;
|
height?: string | number;
|
||||||
|
noScroll?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function CodeExample({ code, height = "100%" }: CodeExampleProps) {
|
export default function CodeExample({ code, height = "100%", noScroll = false }: CodeExampleProps) {
|
||||||
return (
|
return (
|
||||||
<div className={styles.editorWrapper}>
|
<div className={styles.editorWrapper}>
|
||||||
<div className={styles.editorContainer}>
|
<div className={styles.editorContainer} style={{ pointerEvents: noScroll ? 'none' : 'auto' }}>
|
||||||
<Editor
|
<Editor
|
||||||
height={height}
|
height={height}
|
||||||
defaultLanguage="typescript"
|
defaultLanguage="typescript"
|
||||||
|
|||||||
Reference in New Issue
Block a user