Marks, lines, and a table that breaks

A long table lay straight across the gap between two sheets with a row
cut in half, and a shorter one jumped to the next sheet whole leaving
the rest of the first blank. Tables are broken between their rows now,
which is where a table breaks on paper. The spacer there is a tr with
one borderless cell: a div inside a tbody is not something the browser
keeps. Its own spacer rows are subtracted again on the next measurement
and counted into the shift every block below inherits — miss that and
everything under a broken table is measured a page too high.

A dialog closed in the middle of an edit if a selection was dragged past
its edge: the click lands on the nearest common ancestor of press and
release, which is the backdrop, and every dialog read that as "clicked
beside me". They remember where the press began now. All ten.

A note and a chapter can wear a mark of their own beside the name,
chosen from a short list searched by what a thing is for rather than
from the system emoji keyboard — a different thing on every machine, and
three thousand pictures for a decision that is "which of these is the
invoice notebook". A separator takes its own colour and one of five
shapes, and a chapter can be divided like the notebook it sits in: both
places a chapter is shown draw it with one component now, so it cannot
be divisible in the column and not in the unfolded block.

Also: a chapter's colour could not be cleared, because the update rode
on COALESCE and null there means "leave it alone". A table's header row
is legible on the dark theme. Three entries in the table's own menu were
still German. Opening a notebook opens its first note, on a wide screen
only — on a phone the list is the screen.

Fourteen suites green: 364 browser checks, 241 unit tests.

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

e2e/organise.mjs

@@ -265,6 +265,40 @@ try {
   await p.waitForTimeout(800);
   check((await p.locator("[data-separator]").count()) === 1, "and back on the way in");
 
+  /* ── a line can be given its own colour and shape ──
+   * A notebook divided into three parts is easier to read at a glance when the
+   * lines differ; grey-on-grey they all look like the same line repeated. */
+  await p.locator("[data-separator]").click({ button: "right" });
+  await p.waitForTimeout(600);
+  await p.locator("[data-submenu-toggle]").filter({ hasText: "Colour" }).first().click();
+  await p.waitForTimeout(500);
+  await p.locator("[data-submenu] button").filter({ hasText: "Teal" }).first().click();
+  await p.waitForTimeout(2000);
+  await p.locator("[data-separator]").click({ button: "right" });
+  await p.waitForTimeout(600);
+  await p.locator("[data-submenu-toggle]").filter({ hasText: "Line" }).first().click();
+  await p.waitForTimeout(500);
+  await p.locator("[data-submenu] button").filter({ hasText: "Dashed" }).first().click();
+  await p.waitForTimeout(2200);
+
+  const stored = (await api(p, "GET", "/notebooks")).body.find((b) => b.name === "Ordnung");
+  const seps = JSON.parse(stored?.separators || "[]");
+  check(
+    seps[0]?.color === "#1f9c96" && seps[0]?.style === "dashed",
+    "a separator keeps its own colour and line style, on the server",
+    JSON.stringify(seps)
+  );
+  // Drawn, not just stored: the rule is a dashed border rather than a filled bar.
+  const drawn = await p.locator("[data-separator-rule]").first().evaluate((el) => {
+    const cs = getComputedStyle(el);
+    return { style: cs.borderTopStyle, colour: cs.borderTopColor };
+  });
+  check(
+    drawn.style === "dashed" && /31,\s*156,\s*150/.test(drawn.colour),
+    "and it is drawn that way, not only recorded",
+    JSON.stringify(drawn)
+  );
+
   /* Removing is a right-click behind a confirmation. The × used to sit a few
      pixels from the label you click to rename, so tidying the list and
      destroying part of it were neighbouring gestures. */