fix UI diff scrolling bug

Author: thjaeckle

ui/main.scss

@@ -302,6 +302,14 @@ button.busy .spinner-border {
     fill: rgba(58, 140, 154, 0.2);
     stroke: rgba(58, 140, 154, 0.5);
   }
+
+  // Let clicks pass through AceDiff's gutter SVG (connectors) so that
+  // the overview minimap (.diff-overview) underneath remains clickable.
+  // AceDiff recreates its gutter SVG asynchronously on scroll/resize,
+  // which can push it on top of the minimap in the DOM.
+  .acediff__gutter > svg:not(.diff-overview) {
+    pointer-events: none;
+  }
 }
 
 /* History mode styles */

ui/modules/things/thingsDiff.ts

@@ -187,11 +187,17 @@ export function ThingsDiff(targetTab) {
       fetchAndDiff();
       viewDirty = false;
     }
-    // Resize editors to fit the container
+    // Resize editors to fit the container and re-render the overview
+    // after AceDiff's async event handlers (scroll sync, resize) settle.
     if (diffInstance) {
       const editors = diffInstance.getEditors();
       editors.left.resize();
       editors.right.resize();
+      setTimeout(() => {
+        if (diffInstance) {
+          renderChangeOverview(diffInstance.diffs);
+        }
+      }, 50);
     }
     syncTabs(tabLink);
   }
@@ -420,6 +426,13 @@ export function ThingsDiff(targetTab) {
 
     const svgNS = 'http://www.w3.org/2000/svg';
 
+    // Ensure AceDiff's connector SVGs don't block minimap clicks.
+    // AceDiff recreates its gutter SVG asynchronously (on scroll, resize),
+    // so this must run every time the overview is (re-)rendered.
+    gutterEl.querySelectorAll(':scope > svg:not(.diff-overview)').forEach(
+      (svg: SVGElement) => { svg.style.pointerEvents = 'none'; }
+    );
+
     // Reuse existing SVG or create a new one
     if (!overviewSvg) {
       overviewSvg = document.createElementNS(svgNS, 'svg');
@@ -459,11 +472,11 @@ export function ThingsDiff(targetTab) {
 
       rect.addEventListener('click', (e) => {
         e.stopPropagation();
-        // Scroll both editors without animation. Animation caused a
-        // bounce: each animated frame triggered AceDiff's proportional
-        // scroll sync on the opposite editor, creating oscillation.
+        // Only scroll the left editor — AceDiff's locked proportional
+        // scroll sync will position the right editor automatically.
+        // Scrolling both editors caused a race: AceDiff's throttled
+        // (16ms) sync handlers would override one or both positions.
         editors.left.scrollToLine(diff.leftStartLine, true, false, () => {});
-        editors.right.scrollToLine(diff.rightStartLine, true, false, () => {});
       });
       rect.addEventListener('mouseenter', () => {
         rect.style.fill = 'rgba(58, 140, 154, 0.9)';

ui/modules/utils.ts

@@ -17,6 +17,10 @@ import * as ace from 'ace-builds/src-noconflict/ace';
 import { Modal, Toast } from 'bootstrap';
 import DOMPurify from 'dompurify';
 
+// Disable Ace worker loading globally — the JSON worker would try to fetch
+// from a CDN, which fails in restricted environments. Workers are only used
+// for live syntax validation, which is not needed in our read-only editors.
+ace.config.setDefaultValue('session', 'useWorker', false);
 
 const dom = {
   modalBodyConfirm: null,
@@ -370,7 +374,6 @@ export function confirm(message: string, action: string, callback) {
 export function createAceEditor(domId: string, sessionMode, readOnly = false, wrap = false) {
   const result = ace.edit(domId);
   result.setOption('wrap', wrap);
-  result.setOption('useWorker', false);
   result.session.setMode(sessionMode);
   if (readOnly) {
     result.setReadOnly(true);