Stop a drawing from making its note unwritable

The layer showing saved ink lies over the text. The canvas itself is deaf
to the pointer, but the box I wrapped it in yesterday was not — so on any
note carrying a drawing, every click meant for the text was swallowed
before it arrived, and the note simply could not be typed in.

Introduced with per-page drawing, where each page's ink got a wrapper to
be positioned by. The suite now clicks into the text of a note that has a
drawing and types, and asks what actually answers over the writing.

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

e2e/drawing.mjs

@@ -196,6 +196,30 @@ try {
     `${diff(second, reloadedTwo)} cells`
   );
 
+  /* ── a drawing must not make the note unwritable ──
+   * The layers that show saved ink lie over the text. They are transparent and
+   * deaf to the pointer — except the wrapper around one of them was not, and a
+   * note with a drawing could not be typed in at all: every click meant for the
+   * text was swallowed before it arrived. */
+  await p.locator("button").filter({ hasText: "Write" }).first().click();
+  await p.waitForTimeout(1200);
+  check(
+    await p.evaluate(() => {
+      const r = document.querySelector(".ProseMirror").getBoundingClientRect();
+      const el = document.elementFromPoint(r.x + r.width / 2, r.y + 20);
+      return !!el?.closest(".ProseMirror");
+    }),
+    "over the writing it is the writing that answers, not the ink layer"
+  );
+  await p.locator(".ProseMirror").click();
+  await p.keyboard.type("Getippt, obwohl die Notiz eine Zeichnung hat.");
+  await p.waitForTimeout(1800);
+  check(
+    (await p.locator(".ProseMirror").innerText()).includes("obwohl die Notiz eine Zeichnung hat"),
+    "and a note with a drawing can still be written in",
+    await p.locator(".ProseMirror").innerText()
+  );
+
   /* Clearing acts on the page you are looking at, not on the whole drawing. */
   await p.locator("button").filter({ hasText: "Draw" }).first().click();
   await p.waitForTimeout(1200);

frontend/src/features/notes/NoteEditor.jsx

@@ -849,7 +849,19 @@ export function NoteEditor({
                 <div
                   key={page}
                   data-drawn-page={page}
-                  style={{ position: "absolute", left: 0, right: 0, top: (page - 1) * stageSize.h, height: stageSize.h }}
+                  style={{
+                    position: "absolute",
+                    left: 0,
+                    right: 0,
+                    top: (page - 1) * stageSize.h,
+                    height: stageSize.h,
+                    /* Deaf to the pointer, or this box lies over the writing and
+                       swallows every click meant for the text — which is exactly
+                       what it did: a note with a drawing could not be typed in
+                       at all. The canvas inside says the same thing, but a
+                       transparent wrapper is still a wrapper. */
+                    pointerEvents: "none",
+                  }}
                 >
                   <DrawingLayer
                     strokes={sheetStrokes({ sheets }, page)}