fix(diff): monkey-patch Monaco's combined-overview-ruler width 30 → 8 px

The previous "unified column on the modified pane" approach worked
mechanically but only showed marks from the modified side — a per-side
overview ruler is structurally incapable of rendering an AGGREGATED
(original + modified) heatmap. So we're going back to Monaco's combined
diff overview ruler (renderOverviewRuler: true) but solving the width
problem properly.

Research (see commit history + agent thread): In Monaco 0.43.x the
combined ruler's width is hardcoded:
  esm/vs/editor/browser/widget/diffEditorWidget.js:1125
  DiffEditorWidget.ENTIRE_DIFF_OVERVIEW_WIDTH = 30

It's a static class field, not an editor option. There's no theme key,
no CSS variable, no constructor parameter for it. BUT Monaco re-reads
the static on every layout() call inside _layoutOverviewRulers() and
_doLayout(), so monkey-patching the field on the constructor + calling
layout() re-flows the editor widths, viewport padding, and per-canvas
ruler sizes consistently at the new value.

Implementation:
  const cls: any = (this.monacoDiffEditor as any).constructor
  if (cls) { cls.ENTIRE_DIFF_OVERVIEW_WIDTH = 8 }
  // Also patch widget v2's OverviewRulerPart defensively
  const v2Part = (monaco as any)?.editor?.OverviewRulerPart
  if (v2Part) {
    v2Part.ONE_OVERVIEW_WIDTH = 4
    v2Part.ENTIRE_DIFF_OVERVIEW_WIDTH = 8
  }
  this.monacoDiffEditor.layout()

The combined ruler is now 8 px wide and serves as the only vertical
chrome on the diff page. Click + drag still work because Monaco's
delegateVerticalScrollbarPointerDown delegates pointer events to the
modified editor's underlying vertical scrollbar by SCREEN-Y coordinates,
not ruler X-width — so the drag affordance survives both the visual
scrollbar being hidden AND the ruler being narrowed to 8 px.

Both per-side scrollbars set to vertical: 'hidden' since the combined
heatmap is the single scroll affordance. Per-side overview rulers off
(overviewRulerLanes: 0) so the combined heatmap is the only mark
column.

README rewritten to describe the constant-patching technique and the
screen-Y-based click+drag delegation.

Sources for the technique:
  https://github.com/microsoft/monaco-editor/blob/main/src/vs/editor/browser/widget/diffEditor/components/overviewRulerPart.ts
  https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IDiffEditorBaseOptions.html

Author: mxhob1

README.md

@@ -68,23 +68,27 @@ Live at:
 
 ### Diff viewer (`/diff`)
 
-- **Side-by-side diff** with the **change heatmap unified into the
-  modified pane's scrollbar column.** Monaco's editor renders the
-  per-side overview ruler and the vertical scrollbar in the same
-  column whose width tracks `verticalScrollbarSize` — so by enabling
-  `overviewRulerLanes: 3` on the modified pane while keeping its
-  8-px scrollbar visible (`verticalScrollbarSize: 8`), the diff
-  marks and the scroll slider read as a single 8-px chrome strip
-  on the right edge of the diff. The original pane's scrollbar
-  AND overview ruler are both off (`overviewRulerLanes: 0`,
-  `scrollbar.vertical: 'hidden'`) since intra-diff sync drives
-  that side from the modified scrollbar anyway. The diff editor's
-  OWN combined overview ruler (which Monaco normally renders as a
-  separate wider column with a chunky viewport-position slider) is
-  disabled (`renderOverviewRuler: false`) so the unified per-side
-  column is the only vertical chrome. Scroll affordances: spin the
-  mousewheel inside either pane, drag the scroll slider on the
-  right edge, or click on a change mark to jump to that line.
+- **Side-by-side diff** with the **combined change heatmap doubling
+  as the only scrollbar.** Monaco's diff editor renders a unified
+  overview ruler at the rightmost column that aggregates added /
+  removed line marks from BOTH sides into one heatmap (a per-side
+  overview ruler can only show one side's marks, so this is the
+  only path to a true combined view). The column's width is
+  hardcoded to 30 px in Monaco 0.43.x via the static
+  `DiffEditorWidget.ENTIRE_DIFF_OVERVIEW_WIDTH` — we **monkey-patch
+  it down to 8 px** at editor construction time by writing to the
+  static field on the constructor (Monaco re-reads it on every
+  `layout()` pass, so we patch then immediately call `layout()` to
+  re-flow widths + canvas sizes). Both per-side scrollbars are
+  hidden (`vertical: 'hidden'`, `verticalScrollbarSize: 0`); the
+  combined heatmap is the only visible vertical chrome on the
+  page. Scroll affordances all still work: the mousewheel scrolls
+  either pane (intra-diff sync keeps them locked), click on a
+  change mark jumps to that line, and click + drag on the heatmap
+  scrolls — Monaco's `delegateVerticalScrollbarPointerDown` routes
+  pointer events into the modified editor's underlying vertical
+  scrollbar by **screen-Y coordinates**, so the affordance survives
+  the visual scrollbar being hidden AND the ruler being narrowed.
 - **Editable pane labels** above the diff — rename either side and
   the URL hash is regenerated on the fly via `history.replaceState`,
   so the next *Copy link* picks up the new names.

pages/diff.vue

@@ -284,57 +284,84 @@ export default Vue.extend({
                * when the container resizes, which is exactly the
                * flex-grow behaviour we have on the shell. */
               automaticLayout: true,
-              /* Disable the diff editor's OWN combined overview ruler
-               * (Monaco renders this as a separate ~14-px column to
-               * the right of the modified pane, with the viewport
-               * slider as a chunky gray rounded-rect — that's what was
-               * appearing as an unhidable scrollbar). The heatmap +
-               * scroll affordance is moved to the modified pane's
-               * per-side overview ruler below, which Monaco renders
-               * at the same width as the scrollbar (8 px here) and
-               * fully wires for click-to-jump + drag-to-scroll. */
+              /* Combined overview ruler ON — this is the rightmost
+               * column inside the diff editor that shows added /
+               * removed line marks aggregated across BOTH sides
+               * (a per-side overview ruler can only show its own
+               * side's marks, so this is the only way to render a
+               * unified heatmap). The width is monkey-patched below
+               * from Monaco's hardcoded 30 px → 8 px via the static
+               * `ENTIRE_DIFF_OVERVIEW_WIDTH` field on the
+               * DiffEditorWidget constructor (Monaco re-reads this
+               * constant on every layout pass). The combined ruler's
+               * click + drag is delegated to the modified editor's
+               * vertical scrollbar by screen-Y coordinates inside
+               * Monaco's `delegateVerticalScrollbarPointerDown`, so
+               * scroll-by-drag stays wired up at the narrower width.
+               * */
               overviewRulerBorder: false,
               renderLineHighlight: 'none',
-              renderOverviewRuler: false,
+              renderOverviewRuler: true,
             }
           ) as any
           if (this.monacoDiffEditor) {
-            /* Dedupe per-pane scrollbars: hide the original pane's
-             * vertical scrollbar entirely and keep a slim 8px
-             * scrollbar on the modified pane. Both panes scroll in
-             * lock-step thanks to Monaco's intra-diff sync, so a
-             * single bar drives both. */
+            /* Patch Monaco's hardcoded combined-overview width from
+             * 30 px → 8 px so the heatmap column matches the slim
+             * scrollbars used elsewhere. The constant is a static
+             * class field on DiffEditorWidget; Monaco re-reads it
+             * inside `_layoutOverviewRulers()` and `_doLayout()` on
+             * every layout() call, so patching after construction +
+             * calling layout() re-flows the editor widths, viewport
+             * padding, and canvas sizes consistently. The legacy
+             * widget exposes the static under the constructor (which
+             * we reach via the instance's .constructor); widget v2's
+             * `OverviewRulerPart` is also patched defensively for
+             * future bundle versions even though 0.43.x defaults to
+             * the legacy widget. */
             try {
-              /* Original pane: scrollbar + overview ruler BOTH off.
-               * Intra-diff sync drives this pane from the modified
-               * side's scrollbar, so a separate scroll affordance
-               * here would only confuse. */
+              const TARGET_WIDTH = 8
+              const cls: any = (this.monacoDiffEditor as any).constructor
+              if (cls) {
+                cls.ENTIRE_DIFF_OVERVIEW_WIDTH = TARGET_WIDTH
+              }
+              const v2Part = (monaco as any)?.editor?.OverviewRulerPart
+              if (v2Part) {
+                v2Part.ONE_OVERVIEW_WIDTH = TARGET_WIDTH / 2
+                v2Part.ENTIRE_DIFF_OVERVIEW_WIDTH = TARGET_WIDTH
+              }
+              /* Force a layout pass so the editor widths + ruler
+               * canvas dimensions pick up the new constant. */
+              this.monacoDiffEditor.layout()
+            } catch (_e) {
+              /* Patch failed — overview ruler stays at default 30 px.
+               * Visually wider than the slim chrome elsewhere but not
+               * broken. */
+            }
+            try {
+              /* Both per-side scrollbars hidden. The combined diff
+               * overview ruler (now 8 px wide) is the single visible
+               * vertical affordance: it shows aggregated change marks
+               * AND functions as the scrollbar — Monaco's
+               * `delegateVerticalScrollbarPointerDown` routes pointer
+               * events into the modified editor's underlying vertical
+               * scrollbar by screen-Y coordinates, so click + drag
+               * still work even though the modified scrollbar is
+               * visually hidden. Per-side overview rulers also off
+               * (lanes: 0) so the combined heatmap is the only mark
+               * column. */
+              const hiddenScroll = {
+                vertical: 'hidden' as const,
+                verticalScrollbarSize: 0,
+                verticalSliderSize: 0,
+              }
               this.monacoDiffEditor.getOriginalEditor().updateOptions({
-                scrollbar: {
-                  vertical: 'hidden',
-                  verticalScrollbarSize: 0,
-                  verticalSliderSize: 0,
-                },
+                scrollbar: hiddenScroll,
                 overviewRulerLanes: 0,
                 hideCursorInOverviewRuler: true,
               })
-              /* Modified pane: slim 8-px scrollbar visible AND its
-               * per-side overview ruler enabled with 3 lanes for
-               * diff-mark rendering. Monaco draws the overview ruler
-               * and the scrollbar in the SAME column (width =
-               * verticalScrollbarSize), so the heatmap and the
-               * scroll slider read as one unified 8-px chrome strip
-               * on the right edge of the modified pane. Click + drag
-               * on the slider scrolls; click on a change mark jumps
-               * to that line. */
               this.monacoDiffEditor.getModifiedEditor().updateOptions({
-                scrollbar: {
-                  vertical: 'auto',
-                  verticalScrollbarSize: 8,
-                  verticalSliderSize: 8,
-                  useShadows: false,
-                },
-                overviewRulerLanes: 3,
+                scrollbar: hiddenScroll,
+                overviewRulerLanes: 0,
                 hideCursorInOverviewRuler: true,
               })
             } catch (_e) {