From 6a5e2392851f3ddaa3dbe9a0096ce83a82dea096 Mon Sep 17 00:00:00 2001 From: mARTin-B78 Date: Sat, 26 Sep 2026 23:12:02 +0200 Subject: [PATCH] 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 --- CHANGELOG.md | 1 + static/style.css | 6 ++++++ tests/magazine.spec.js | 5 ++++- 3 files changed, 11 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index ffc4e8b..4a71a4c 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/static/style.css b/static/style.css index 16165b8..be821b8 100644 --- a/static/style.css +++ b/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; } +} diff --git a/tests/magazine.spec.js b/tests/magazine.spec.js index 8454524..c76bb65 100644 --- a/tests/magazine.spec.js +++ b/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);