Three things that only showed on screen

Grey letters ran down the bar while dragging a column edge. The editor marks
the column under the pointer by putting a small div in each of its cells;
drawn along the cell's right edge, that absolutely positioned child sent
Chromium down another painting path and the cell's own text came out a second
time, squeezed into the two pixels under the bar, one letter to a line. It
appeared with the bar and went with it, which named the culprit -- measured,
there was no text there at all, only three empty markers, and a forced repaint
did not clear it. The marker is display:none now and only says which cells the
column is made of; the line is an inset shadow on those cells, matched with
:has(). Two suspects were tried and reverted first: the table as its own paint
region, and separate borders. Neither changed anything, so neither stayed.

Opening a note flashed a long narrow page. The drawing stage starts at the
canonical page, 1600px tall, and the measurement that fits it to the pane ran
as an ordinary effect -- a frame too late. useLayoutEffect runs between the DOM
being built and the browser painting it, which is exactly the gap that flash
lived in. The test samples the sheet's height every frame across a note switch,
because one frame is all it was.

The mark above a note did not stand in the same column as the tools below it.
Vertically it was already exact -- measured, symbol centre 20, cap centre 20 --
but it began six pixels right of the first tool, and the title thirty. The
mark's box is only as wide as the mark now, so the mark lands on that column,
and the title follows nine pixels closer.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

frontend/src/editor/editor.css

@@ -225,15 +225,27 @@
   background: color-mix(in srgb, var(--ne-accent) 18%, transparent);
   pointer-events: none;
 }
-/* Drag handle between columns */
+/* The edge being dragged, drawn *on the cell* rather than in it.
+ *
+ * The editor marks the column under the pointer by putting a small div in each
+ * cell of it, and the obvious way to show that is to position the div along the
+ * cell's right edge. Which worked, and painted grey letters down the bar: an
+ * absolutely positioned child inside a cell of a `border-collapse: collapse`
+ * table sends Chromium down another painting path, and the cell's own text came
+ * out a second time, squeezed into the two pixels under the bar — one letter to
+ * a line. It appeared with the bar and went with it, which is what named the
+ * culprit.
+ *
+ * So the div is never drawn at all; it only marks which cells belong to the
+ * column, and the line is an inset shadow on those cells. Nothing is positioned,
+ * nothing paints twice, and the result is the same line — a continuous one down
+ * the column, because every cell in it carries its own piece. */
 .note-editor .ProseMirror .column-resize-handle {
-  position: absolute;
-  right: -2px;
-  top: 0;
-  bottom: -2px;
-  width: 4px;
-  background: var(--ne-accent);
-  pointer-events: none;
+  display: none;
+}
+.note-editor .ProseMirror td:has(> .column-resize-handle),
+.note-editor .ProseMirror th:has(> .column-resize-handle) {
+  box-shadow: inset -2px 0 0 var(--ne-accent);
 }
 .note-editor .ProseMirror.resize-cursor {
   cursor: col-resize;

frontend/src/features/notes/EditorPane.jsx

@@ -188,7 +188,10 @@ export function EditorPane({
           display: "flex",
           alignItems: "center",
           gap: 8,
-          padding: "8px 16px",
+          /* The same inset as the toolbar under it. The mark used to start six
+             pixels right of the first tool below it, so the two rows did not
+             share a left edge and the title read as pushed across. */
+          padding: "8px 12px",
           borderBottom: `1px solid ${T.borderLight}`,
         }}
       >
@@ -204,21 +207,24 @@ export function EditorPane({
             its box and sat on the middle. Measured, the mark ended up 2px high
             and dipped below the line the title never crossed. Sharing a baseline
             is what "on one line" means, and it needs no number. */}
-        <div style={{ display: "flex", alignItems: "baseline", gap: 4, flex: 1, minWidth: 0 }}>
+        <div style={{ display: "flex", alignItems: "baseline", gap: 5, flex: 1, minWidth: 0 }}>
           <button
             onClick={onPickIcon}
             data-note-icon={note.icon || "none"}
             title="Choose an icon for this note"
             aria-label="Choose an icon for this note"
             style={{
-              /* One square box whatever it holds. An emoji and the drawn glyph
-                 have different metrics, and sizing to the content moved the
-                 title sideways the moment a mark was chosen. Laid out as text
+              /* One box of a fixed width whatever it holds. An emoji and the
+                 drawn glyph have different metrics, and sizing to the content
+                 moved the title sideways the moment a mark was chosen. Just
+                 wide enough for the mark, so the mark itself lands on the
+                 column the tools below it stand in; still a full row tall, so
+                 there is something to hit with a finger. Laid out as text
                  rather than as a flex box, because only text has a baseline for
                  the title to line up with. */
               display: "inline-block",
               textAlign: "center",
-              width: 26,
+              width: 20,
               height: 26,
               lineHeight: "26px",
               flexShrink: 0,

frontend/src/features/notes/NoteEditor.jsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { useNoteEditor, EditorSurface } from "../../editor/useNoteEditor.jsx";
 import { EditorToolbar } from "../../editor/EditorToolbar.jsx";
 import { tableMenuItems } from "../../editor/tableMenu.js";
@@ -181,8 +181,15 @@ export function NoteEditor({
     };
   }, [note.id, note.drawingData]);
 
-  // Keep one fixed-aspect drawing stage regardless of device dimensions.
-  useEffect(() => {
+  /* Keep one fixed-aspect drawing stage regardless of device dimensions.
+   *
+   * Measured *before* the first paint, not after. The stage starts at the
+   * canonical page — 1200 × 1600 — and this runs on every note, because the
+   * editor is built fresh for each one. As an ordinary effect it ran a frame
+   * too late, so opening a note drew one frame of a page sixteen hundred pixels
+   * tall before the measurement pulled it back: the sheet shot up long and
+   * narrow and then righted itself, every single time. */
+  useLayoutEffect(() => {
     const fitStage = () => {
       const host = stageRef.current;
       if (!host) return;