Write pinned notes in the margin, and give the phone a sheet instead

A note about a passage belongs beside the passage, not on top of it. Only a
numbered marker stays on the page now, with a hairline out to a card in the
margin, level with its anchor. Cards keep one height so two notes close together
can be laid out by pushing the second down; the one being written in grows and
rises above the rest.

A phone has no margin to write in — a page narrow enough to read leaves no white
space beside it, and taking a column would make the document unreadable. There
the note comes up from the bottom instead: over the page, only while open, within
reach of a thumb, with the passage still visible above it.

Reserving the column exposed a loop worth remembering. A flex item is as wide as
its content unless told otherwise, so the column made the viewer wider, which
made there be room for the column: the page ended up at 254px inside a 420px
phone while the layout insisted it had 611px. The viewer and the editor pane now
say minWidth: 0, and the toolbar scrolls rather than cutting its last controls
off on a narrow screen.

Splitting each row into page and margin also broke which pages counted as
visible — the check read data-pdf-page off the row, found nothing, and cancelled
every text layer before it rendered. It reads the row's own attribute now.

215 unit tests, 219 browser checks across eleven suites, including the phone
layout at 420px.

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

readme.md

@@ -332,7 +332,7 @@ docker compose -f docker-compose.dev.yml up -d --build   # must be running
 | `search-attachments` | 12 | body-only matches, ranking, umlauts; images as blob URLs, not inline bytes |
 | `history` | 10 | a large deletion is snapshotted, restoring works, restoring is itself undoable |
 | `drawing` | 7 | strokes survive the poller, and match across four viewport widths |
-| `pdf` | 57 | import, page proportions, lazy loading, and reading with the network off |
+| `pdf` | 70 | import, page proportions, lazy loading, and reading with the network off |
 | `attachments-lifecycle` | 10 | a picture is kept while any version shows it, and freed once none does |
 | `conflict` | 10 | a late write wins but the state it buries survives as a version |
 | `export` | 21 | the downloaded bytes are real Markdown, ZIP and PNG, unpacked and read back |
@@ -760,12 +760,30 @@ The panel beside a PDF is for notes about the document. A note that belongs to
 third paragraph" has already lost its place. So a note can be pinned to a spot:
 click **Randnotiz**, click the passage, write.
 
-Pins are stored in the same per-page overlay as the drawings, in **PDF points**.
-That is what keeps one on its sentence at every zoom, on every screen, and in the
-exported file — the same property the strokes have, for the same reason.
+**The note is written beside the page, not on it.** Only a small numbered marker
+sits on the document, with a hairline out to a card in the margin, level with the
+passage. Writing onto the page would cover the sentence the note is about, which
+is the one thing it must not do. Cards keep one height, so two notes close
+together are laid out by pushing the second down until they no longer overlap;
+the one being written in grows and rises above the rest.
 
-Being in the overlay rather than in the note body has three consequences, each of
-which needed handling rather than assuming:
+**On a phone there is no margin.** A page narrow enough to read leaves no white
+space beside it, and taking 200px for a column would make the document itself
+unreadable. There, tapping a marker brings the note up from the bottom — over the
+page, but only while it is open, within reach of a thumb, and with the passage
+still visible above it.
+
+The column is kept as soon as the document has one pinned note, or while one is
+being placed, so the page does not jump sideways at the moment of writing the
+first. Reserving it also exposed a loop worth remembering: a flex item is as wide
+as its content unless told otherwise, so the column made the viewer wider, which
+made there be room for the column — the page ended up at 254px inside a 420px
+phone while the layout insisted it had 611px.
+
+Positions are stored in **PDF points**, the same space as the drawings, so a
+marker stays on its sentence at every zoom and on every screen. Being in the
+overlay rather than in the note body has three consequences, each of which needed
+handling rather than assuming:
 
 - **Search.** Nothing else would index them, so the viewer feeds them to the
   local index itself, with their page numbers — finding the words is only half of