Fix editor scrolling issues by enabling overflow on editor body and preventing modal scroll conflicts

This commit is contained in:
Bruno Charest 2026-03-21 12:55:35 -04:00
parent eac1980e62
commit 0ba58115a2
2 changed files with 49 additions and 4 deletions

View File

@ -982,6 +982,17 @@
closeEditor(); closeEditor();
} }
}); });
// Fix mouse wheel scrolling in editor
modal.addEventListener("wheel", (e) => {
const editorBody = document.getElementById("editor-body");
if (editorBody && editorBody.contains(e.target)) {
// Let the editor handle the scroll
return;
}
// Prevent modal from scrolling if not in editor area
e.preventDefault();
}, { passive: false });
} }
// --------------------------------------------------------------------------- // ---------------------------------------------------------------------------

View File

@ -924,23 +924,31 @@ a:hover {
.editor-body { .editor-body {
flex: 1; flex: 1;
overflow: hidden; min-height: 0;
position: relative; position: relative;
overflow-y: auto;
overflow-x: hidden;
} }
.cm-editor { .cm-editor {
height: 100%; height: auto;
min-height: 100%;
font-size: 0.9rem; font-size: 0.9rem;
} }
.cm-scroller { .cm-scroller {
font-family: 'JetBrains Mono', monospace; font-family: 'JetBrains Mono', monospace;
overflow-y: auto !important;
overflow-x: auto !important;
height: auto;
min-height: 100%;
max-width: 100%;
} }
.fallback-editor { .fallback-editor {
width: 100%; width: 100%;
height: 100%; min-height: 100%;
min-height: 420px; height: auto;
border: none; border: none;
outline: none; outline: none;
resize: none; resize: none;
@ -950,6 +958,11 @@ a:hover {
font-family: 'JetBrains Mono', monospace; font-family: 'JetBrains Mono', monospace;
font-size: 0.9rem; font-size: 0.9rem;
line-height: 1.55; line-height: 1.55;
box-sizing: border-box;
overflow-y: auto;
overflow-x: auto;
white-space: pre-wrap;
word-wrap: break-word;
} }
/* Mobile editor */ /* Mobile editor */
@ -977,6 +990,27 @@ a:hover {
font-size: 0.75rem; font-size: 0.75rem;
padding: 5px 10px; padding: 5px 10px;
} }
.editor-body {
height: calc(100vh - 50px);
overflow: auto;
}
.cm-editor {
height: auto;
min-height: 100%;
}
.cm-scroller {
overflow: auto !important;
height: auto;
min-height: 100%;
}
.fallback-editor {
min-height: calc(100vh - 50px);
height: auto;
}
} }
/* --- No-select during resize --- */ /* --- No-select during resize --- */