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>

frontend/src/features/notes/EditorPane.jsx

@@ -169,7 +169,18 @@ export function EditorPane({
     );
 
   return (
-    <div style={{ flex: 1, display: "flex", flexDirection: "column", background: T.bg, fontFamily: FONT_UI }}>
+    <div
+      style={{
+        flex: 1,
+        // A flex item is otherwise at least as wide as its content, so a wide
+        // pane — a PDF beside its margin — could push itself past the window.
+        minWidth: 0,
+        display: "flex",
+        flexDirection: "column",
+        background: T.bg,
+        fontFamily: FONT_UI,
+      }}
+    >
       <div
         style={{
           display: "flex",
@@ -210,7 +221,7 @@ export function EditorPane({
           {I.trash}
         </button>
       </div>
-      <div style={{ flex: 1, overflow: "hidden", display: "flex", minHeight: 0 }}>
+      <div style={{ flex: 1, overflow: "hidden", display: "flex", minHeight: 0, minWidth: 0 }}>
         {note.type === "pdf" ? (
           <PdfWorkspace
             note={note}