Cap the long lists, and wrap a wide rank on a phone

Two things the first pass got wrong.

The Changes and "Given up on" lists had no cap, so they ran as long as the
audit trail did — and worse, a truncating flex row still offers its whole
unwrapped line as a min-content contribution, so the card sized itself to the
longest entry and took the page sideways with it. Both now use the same
capped, scrolling box the runs and failures lists already had, which fixes the
length and the width together.

Running downwards, a rank of eight nodes was two thousand pixels across
because a node box is landscape: siblings cost a rank four times as much
across as they do down it. A rank wider than two now wraps onto the ranks
below, settling over a few passes since wrapping one rank pushes what was
under it up into the room that freed. The value chip on an edge no longer
reserves its width there either — that width is spent across the screen rather
than along the flow, and the rank gap it would widen is already wider than the
chip is tall. The same flow that laid out 2040x216 is now 803x722; a chain and
a diamond are unchanged, and so is every desktop layout.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01VDSXaRhvqHYNevgDGmNAto

frontend/tests/mobile.spec.ts

@@ -40,8 +40,8 @@ async function expectFits(page: Page, where: string) {
 test.beforeAll(async ({ browser }) => {
   const page = await apiPage(browser)
 
-  // A chain and a fork, so the canvas has a graph worth laying out rather
-  // than a single node that fits anywhere.
+  // A chain and a four-way fan: enough of a graph to lay out, and wider than
+  // a phone can take abreast, so the wrapping is exercised.
   await api(page, `/flows/${flowName}`, {
     method: "PUT",
     data: {
@@ -59,16 +59,11 @@ test.beforeAll(async ({ browser }) => {
           requires: [{ name: "reading", dtype: "float" }],
           provides: [{ name: "scaled", dtype: "float" }],
         },
-        {
-          id: "left",
+        ...["one", "two", "three", "four"].map((id) => ({
+          id,
           type: "python",
           requires: [{ name: "scaled", dtype: "float" }],
-        },
-        {
-          id: "right",
-          type: "python",
-          requires: [{ name: "scaled", dtype: "float" }],
-        },
+        })),
       ],
       version: 1,
     },
@@ -159,6 +154,18 @@ test("the flow editor fits, and its dock is reachable", async ({ page }) => {
   )
   expect(Math.abs(scale.x - source.x)).toBeLessThan(200)
 
+  // …and it grows downwards rather than sideways: the four consumers of one
+  // message wrap onto rows instead of standing eight hundred pixels abreast.
+  const rows = new Map<number, number>()
+  for (const id of ["source", "scale", "one", "two", "three", "four"]) {
+    const { y } = await nodeAt(page, id)
+    rows.set(y, (rows.get(y) ?? 0) + 1)
+  }
+  expect(
+    Math.max(...rows.values()),
+    "a row is wider than a phone",
+  ).toBeLessThanOrEqual(2)
+
   // The dock used to overflow a phone, which put the buttons at its ends
   // outside the shell's `overflow-hidden` and made them unclickable.
   for (const id of ["add-node", "run-flow", "edit-flow", "publish-flow"]) {