From 0ba58115a207027555ce6e952b1a3e2bea083452 Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Sat, 21 Mar 2026 12:55:35 -0400
Subject: [PATCH] Fix editor scrolling issues by enabling overflow on editor
 body and preventing modal scroll conflicts

---
 frontend/app.js    | 11 +++++++++++
 frontend/style.css | 42 ++++++++++++++++++++++++++++++++++++++----
 2 files changed, 49 insertions(+), 4 deletions(-)

diff --git a/frontend/app.js b/frontend/app.js
index 7f9525b..e0b76da 100644
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -982,6 +982,17 @@
         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 });
   }
 
   // ---------------------------------------------------------------------------
diff --git a/frontend/style.css b/frontend/style.css
index b65e2a8..430273a 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -924,23 +924,31 @@ a:hover {
 
 .editor-body {
   flex: 1;
-  overflow: hidden;
+  min-height: 0;
   position: relative;
+  overflow-y: auto;
+  overflow-x: hidden;
 }
 
 .cm-editor {
-  height: 100%;
+  height: auto;
+  min-height: 100%;
   font-size: 0.9rem;
 }
 
 .cm-scroller {
   font-family: 'JetBrains Mono', monospace;
+  overflow-y: auto !important;
+  overflow-x: auto !important;
+  height: auto;
+  min-height: 100%;
+  max-width: 100%;
 }
 
 .fallback-editor {
   width: 100%;
-  height: 100%;
-  min-height: 420px;
+  min-height: 100%;
+  height: auto;
   border: none;
   outline: none;
   resize: none;
@@ -950,6 +958,11 @@ a:hover {
   font-family: 'JetBrains Mono', monospace;
   font-size: 0.9rem;
   line-height: 1.55;
+  box-sizing: border-box;
+  overflow-y: auto;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-wrap: break-word;
 }
 
 /* Mobile editor */
@@ -977,6 +990,27 @@ a:hover {
     font-size: 0.75rem;
     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 --- */