From 9b426832e13a6f4c3c0e6b92a0af0fb8f679c9ec Mon Sep 17 00:00:00 2001
From: Steffen Becker <stffn.becker@gmail.com>
Date: Sun, 6 Sep 2026 18:46:02 +0200
Subject: [PATCH] fix: the ruler stays over the page beside the balloon strip
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`.paper-scaler` reserves page plus strip and centres the pair, so a document
with margin balloons sits left of centre — the ruler, sized from the page
alone, centred over a narrower box and hung to the right of the page it
measures. It now reserves the same strip as `padding-right`.
---
 src/lib/components/CLAUDE.md     | 6 ++++--
 src/lib/components/Editor.svelte | 2 +-
 src/lib/components/Ruler.svelte  | 7 +++++--
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/CLAUDE.md b/src/lib/components/CLAUDE.md
index d620bb9..2443836 100644
--- a/src/lib/components/CLAUDE.md
+++ b/src/lib/components/CLAUDE.md
@@ -304,8 +304,10 @@ Accept/reject and edit/resolve/remove happen in the balloon — `CommentCard.sve
 - The strip is `REVIEW_MARGIN_CM` (gap + balloon) and is **only reserved when the document
   has markup the margin shows** — a kind switched to the pane, or a mode that hides it,
   leaves `.paper-scaler` exactly the page, centred as before.
-  `scaledCanvasWidth` (`Editor.svelte`) adds it; `scaledWidth` stays the page, which is
-  what the `Ruler` is sized from.
+  `scaledCanvasWidth` (`Editor.svelte`) adds it; `scaledWidth` stays the page. The `Ruler`
+  is sized from the page but reserves the strip as `padding-right`, or its own `margin:
+  auto` would centre it over a narrower box than `.paper-scaler` and it would hang right
+  of the page it measures.
 - **The leader runs in the gap under the anchor's line** (`coordsAtPos(...).bottom`, not the
   line's middle) and eases into the card's left edge at the anchor's own height where the
   card reaches that far — so a balloon sitting at its line is joined by one straight line
diff --git a/src/lib/components/Editor.svelte b/src/lib/components/Editor.svelte
index e740284..8329fad 100644
--- a/src/lib/components/Editor.svelte
+++ b/src/lib/components/Editor.svelte
@@ -1590,7 +1590,7 @@ import { EMPTY_PAGE_DECOR, type PageDecor } from '../storage/pageDecor';
   <!-- Hidden while a header/footer zone is active: those have no tab stops, so the
        ruler would edit the body paragraph behind the user's back. -->
   {#if showRuler && scaledWidth && !hfActive}
-    <Ruler {editor} {tick} zoom={appliedZoom} width={scaledWidth} margins={pageMargins} />
+    <Ruler {editor} {tick} zoom={appliedZoom} width={scaledWidth} margins={pageMargins} gutter={scaledCanvasWidth - scaledWidth} />
   {/if}
   <!-- Reserves the scaled scroll footprint; the transform on .paper reserves none.
        Before the first measure (size 0) it's left unsized so .paper isn't clipped. -->
diff --git a/src/lib/components/Ruler.svelte b/src/lib/components/Ruler.svelte
index 1416bac..08bc778 100644
--- a/src/lib/components/Ruler.svelte
+++ b/src/lib/components/Ruler.svelte
@@ -6,12 +6,13 @@
 
   // Horizontal ruler: the tab stops and indents of the block the cursor is in.
   // Positions are cm from the left text margin, the attr's own origin.
-  let { editor, tick, zoom, width, margins }: {
+  let { editor, tick, zoom, width, margins, gutter = 0 }: {
     editor: Editor | null;
     tick: number;
     zoom: number;
     width: number; // the page's SCALED width in px (.paper-scaler's)
     margins: PageMargins;
+    gutter?: number; // the balloon strip .paper-scaler reserves beside the page
   } = $props();
 
   const TYPES: TabAlign[] = ['left', 'center', 'right', 'decimal'];
@@ -110,7 +111,9 @@
   const at = (t: Drag, stored: number) => (dragging(t) && preview != null ? preview : stored);
 </script>
 
-<div class="ruler" style="width: {width}px">
+<!-- The strip beside the page is reserved here too, so the auto margins centre the
+     ruler over the same footprint as .paper-scaler and it stays above the page. -->
+<div class="ruler" style="width: {width + gutter}px; padding-right: {gutter}px">
   <button
     class="tab-type"
     onpointerdown={(e) => e.preventDefault()}