diff --git a/public/scripts/extensions/quick-reply/src/QuickReply.js b/public/scripts/extensions/quick-reply/src/QuickReply.js
index 70f3f1fbf..5396efbf0 100644
--- a/public/scripts/extensions/quick-reply/src/QuickReply.js
+++ b/public/scripts/extensions/quick-reply/src/QuickReply.js
@@ -673,6 +673,33 @@ export class QuickReply {
         if (this.editorExecuteHide.checked) {
             this.editorPopup.dlg.classList.add('qr--hide');
         }
+        const syntax = this.editorDom.querySelector('#qr--modal-messageSyntaxInner');
+        const updateScroll = (evt) => {
+            let left = syntax.scrollLeft;
+            let top = syntax.scrollTop;
+            if (evt) {
+                evt.preventDefault();
+                left = syntax.scrollLeft + evt.deltaX;
+                top = syntax.scrollTop + evt.deltaY;
+                syntax.scrollTo({
+                    behavior: 'instant',
+                    left,
+                    top,
+                });
+            }
+            this.editorMessage.scrollTo({
+                behavior: 'instant',
+                left,
+                top,
+            });
+        };
+        const updateScrollDebounced = updateScroll;
+        syntax.addEventListener('wheel', (evt)=>{
+            updateScrollDebounced(evt);
+        });
+        syntax.addEventListener('scroll', (evt)=>{
+            updateScrollDebounced();
+        });
         try {
             this.abortController = new SlashCommandAbortController();
             this.debugController = new SlashCommandDebugController();
@@ -693,7 +720,7 @@ export class QuickReply {
                         wrap.classList.add('qr--scope');
                         if (isCurrent) {
                             const executor = this.debugController.cmdStack.slice(-1)[0];
-                            {
+                            { // named args
                                 const namedTitle = document.createElement('div'); {
                                     namedTitle.classList.add('qr--title');
                                     namedTitle.textContent = `Named Args - /${executor.name}`;
@@ -762,7 +789,7 @@ export class QuickReply {
                                     }
                                 }
                             }
-                            {
+                            { // unnamed args
                                 const unnamedTitle = document.createElement('div'); {
                                     unnamedTitle.classList.add('qr--title');
                                     unnamedTitle.textContent = `Unnamed Args - /${executor.name}`;
@@ -842,20 +869,21 @@ export class QuickReply {
                                 }
                             }
                         }
+                        // current scope
                         const title = document.createElement('div'); {
                             title.classList.add('qr--title');
                             title.textContent = isCurrent ? 'Current Scope' : 'Parent Scope';
                             let hi;
                             title.addEventListener('pointerenter', ()=>{
                                 const loc = this.getEditorPosition(Math.max(0, c.executorList[0].start - 1), c.executorList.slice(-1)[0].end);
-                                const layer = this.editorPopup.dlg.getBoundingClientRect();
+                                const layer = syntax.getBoundingClientRect();
                                 hi = document.createElement('div');
                                 hi.classList.add('qr--highlight-secondary');
                                 hi.style.left = `${loc.left - layer.left}px`;
                                 hi.style.width = `${loc.right - loc.left}px`;
                                 hi.style.top = `${loc.top - layer.top}px`;
                                 hi.style.height = `${loc.bottom - loc.top}px`;
-                                this.editorPopup.dlg.append(hi);
+                                syntax.append(hi);
                             });
                             title.addEventListener('pointerleave', ()=>hi?.remove());
                             wrap.append(title);
@@ -987,14 +1015,14 @@ export class QuickReply {
                                 let hi;
                                 item.addEventListener('pointerenter', ()=>{
                                     const loc = this.getEditorPosition(Math.max(0, executor.start - 1), executor.end);
-                                    const layer = this.editorPopup.dlg.getBoundingClientRect();
+                                    const layer = syntax.getBoundingClientRect();
                                     hi = document.createElement('div');
                                     hi.classList.add('qr--highlight-secondary');
                                     hi.style.left = `${loc.left - layer.left}px`;
                                     hi.style.width = `${loc.right - loc.left}px`;
                                     hi.style.top = `${loc.top - layer.top}px`;
                                     hi.style.height = `${loc.bottom - loc.top}px`;
-                                    this.editorPopup.dlg.append(hi);
+                                    syntax.append(hi);
                                 });
                                 item.addEventListener('pointerleave', ()=>hi?.remove());
                                 wrap.append(item);
@@ -1007,7 +1035,7 @@ export class QuickReply {
                 this.editorDebugState.append(buildStack());
                 this.editorDebugState.classList.add('qr--active');
                 const loc = this.getEditorPosition(Math.max(0, executor.start - 1), executor.end);
-                const layer = this.editorPopup.dlg.getBoundingClientRect();
+                const layer = syntax.getBoundingClientRect();
                 const hi = document.createElement('div');
                 hi.classList.add('qr--highlight');
                 if (this.debugController.namedArguments === undefined) {
@@ -1017,7 +1045,7 @@ export class QuickReply {
                 hi.style.width = `${loc.right - loc.left}px`;
                 hi.style.top = `${loc.top - layer.top}px`;
                 hi.style.height = `${loc.bottom - loc.top}px`;
-                this.editorPopup.dlg.append(hi);
+                syntax.append(hi);
                 const isStepping = await this.debugController.awaitContinue();
                 hi.remove();
                 this.editorDebugState.textContent = '';
diff --git a/public/scripts/extensions/quick-reply/style.css b/public/scripts/extensions/quick-reply/style.css
index 7a3455fd3..caa7e1e66 100644
--- a/public/scripts/extensions/quick-reply/style.css
+++ b/public/scripts/extensions/quick-reply/style.css
@@ -242,7 +242,7 @@
   display: none;
 }
 .popup:has(#qr--modalEditor):has(.qr--isExecuting) .qr--highlight {
-  position: fixed;
+  position: absolute;
   z-index: 50000;
   pointer-events: none;
   background-color: rgba(47, 150, 180, 0.5);
@@ -251,7 +251,7 @@
   background-color: rgba(255, 255, 0, 0.5);
 }
 .popup:has(#qr--modalEditor):has(.qr--isExecuting) .qr--highlight-secondary {
-  position: fixed;
+  position: absolute;
   z-index: 50000;
   pointer-events: none;
   border: 3px solid red;
diff --git a/public/scripts/extensions/quick-reply/style.less b/public/scripts/extensions/quick-reply/style.less
index f66206265..d75c7a8e8 100644
--- a/public/scripts/extensions/quick-reply/style.less
+++ b/public/scripts/extensions/quick-reply/style.less
@@ -268,7 +268,7 @@
 		}
 
 		.qr--highlight {
-			position: fixed;
+			position: absolute;
 			z-index: 50000;
 			pointer-events: none;
 			background-color: rgb(47 150 180 / 0.5);
@@ -277,7 +277,7 @@
 			}
 		}
 		.qr--highlight-secondary {
-			position: fixed;
+			position: absolute;
 			z-index: 50000;
 			pointer-events: none;
 			border: 3px solid red;