fix(magazine): phone review toolbar no longer covers the page; fix iPhone test expectations

- The sticky review toolbar wraps to many rows on a phone and covered most of the page image,
  so drawing a region or drag-selecting boxes started on a toolbar button; it now scrolls away
  below 860px
- Delete-button layout test accepts the phone layout (text on its own line)

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

CHANGELOG.md

@@ -8,6 +8,7 @@ Follows [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) · versioned wi
 ## [Unreleased]
 
 ### Fixed
+- **Phone review layout:** the review toolbar no longer sticks to the top on narrow screens, where it covered most of the page image and made drawing regions or drag-selecting boxes start on a toolbar button.
 - **The region-type picker in review opens again** and **"Find missed text" / "Verify OCR text" work**: their click handlers were never exported to the page. A new unit test fails if any inline `mag*` handler is not exported.
 
 ### Added

static/style.css

@@ -5451,3 +5451,9 @@ input[list="lang-codes"] {
   border-left: 4px solid var(--accent); padding-left: 10px; }
 .mag-dw.is-current { background: var(--accent); color: var(--on-accent, #fff); border-radius: 4px; padding: 0 3px; }
 .mag-driving-lyrics { position: relative; }
+
+/* On a phone the review toolbar wraps to many rows; sticky, it would cover most of the page image
+   (drag-drawing and box selection then start on a toolbar button), so it scrolls away instead. */
+@media (max-width: 860px) {
+  .mag-review-pagenav { position: static; box-shadow: none; }
+}

tests/magazine.spec.js

@@ -521,7 +521,10 @@ test('each review row has its own delete button, which deletes at once and offer
   await openReview(page);
   const button = page.locator('[data-block-row="b3"]').getByRole('button', { name: /Delete region/ });
   const [btn, text] = [await button.boundingBox(), await page.locator('[data-block-row="b3"] .mag-block-text').boundingBox()];
-  expect(btn.x + btn.width).toBeLessThanOrEqual(text.x);
+  // Wide screens: the button sits left of the text. Phones drop the text onto its own line, so the
+  // button must be above it instead.
+  if (text.y >= btn.y + btn.height - 1) expect(btn.y + btn.height).toBeLessThanOrEqual(text.y + 1);
+  else expect(btn.x + btn.width).toBeLessThanOrEqual(text.x);
   await button.click();
   await expect.poll(() => deleted).toBe(true);
   await expect(page.getByRole('alertdialog')).toHaveCount(0);