From a23e4be2a18b16545b2b2cc81b3bca6bd0306c40 Mon Sep 17 00:00:00 2001
From: mARTin-B78 <mail@martin-bierschenk.de>
Date: Mon, 28 Sep 2026 18:00:10 +0200
Subject: [PATCH] feat(magazine): Contents button in the sticky review bar

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 CHANGELOG.md                    |  1 +
 static/js/magazine.js           |  3 +++
 static/sections/s-magazine.html |  3 ---
 tests/magazine.spec.js          | 15 +++++++++++++++
 4 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index cee1c1a..ffc2e69 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -44,6 +44,7 @@ Follows [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) · versioned wi
 - **Unboxed ink in or beside a picture, chart or advert is no longer reported as missed text** (labels of a chart, text set into a photo, an advert's own wording).
 
 ### Changed
+- **The Contents button is the first item of the sticky review bar**, so it stays in reach while scrolling a long page.
 - **The page thumbnail is the Review button.** In the thumbnail grid, clicking the (big) page image opens the page in review; the separate *Review* / *Review this page* buttons are gone. A page shared by two or more articles keeps one labelled *Review* button per article, so it stays clear which is meant.
 
 ### Fixed
diff --git a/static/js/magazine.js b/static/js/magazine.js
index 18fe680..c193cb2 100644
--- a/static/js/magazine.js
+++ b/static/js/magazine.js
@@ -1611,6 +1611,9 @@ function renderReview() {
 
   let html = '';
   html += '<div class="mag-review-pagenav">' +
+      // Back to the contents lives in the sticky bar, so it stays in reach while scrolling a long page.
+      '<button type="button" class="btn-sm" id="mag-review-contents-btn" onclick="magBackToContents()" title="Back to the contents">' +
+      '<span class="mdi mdi-arrow-left" aria-hidden="true"></span> Contents</button>' +
       // One page stepper for the whole magazine, not a separate one bounded
       // to just this article's own pages — the two almost always agreed and
       // having both doubled the toolbar's width for no real benefit.
diff --git a/static/sections/s-magazine.html b/static/sections/s-magazine.html
index 46398d3..1e3ac0f 100644
--- a/static/sections/s-magazine.html
+++ b/static/sections/s-magazine.html
@@ -185,9 +185,6 @@
       <!-- ── Review (Stage D) ─────────────────────────────────────────────── -->
       <div id="mag-view-review" hidden>
         <div class="mag-bar">
-          <button type="button" class="btn-sm" onclick="magBackToContents()">
-            <span class="mdi mdi-arrow-left"></span> Contents
-          </button>
           <h3>Review article boundaries</h3>
         </div>
         <div id="mag-review"></div>
diff --git a/tests/magazine.spec.js b/tests/magazine.spec.js
index 2d6167e..7fbc622 100644
--- a/tests/magazine.spec.js
+++ b/tests/magazine.spec.js
@@ -464,6 +464,21 @@ test.describe('Magazine pronunciation and spelling checks', () => {
   });
 });
 
+test('the Contents button is the first item of the sticky review bar and goes back', async ({ page }) => {
+  await mockBackend(page);
+  await page.goto('/', { waitUntil: 'domcontentloaded' });
+  await page.waitForSelector('#app-skeleton', { state: 'detached', timeout: 15_000 });
+  await navTo(page, 's-magazine');
+  await page.locator('#mag-library-list .mag-card').first().click();
+  await page.locator('#mag-contents-view-toggle').click();
+  await page.locator('.mag-card-wrap').filter({ hasText: 'Page 3' }).getByRole('button', { name: /^Review/ }).click();
+  const bar = page.locator('#mag-review .mag-review-pagenav');
+  await expect(bar.locator('> :first-child')).toHaveId('mag-review-contents-btn');
+  await expect(page.locator('#mag-view-review > .mag-bar').getByRole('button', { name: 'Contents' })).toHaveCount(0);
+  await bar.getByRole('button', { name: 'Contents' }).click();
+  await expect(page.locator('#mag-view-contents')).toBeVisible();
+});
+
 test.describe('Magazine: thumbnail as the Review target', () => {
   async function openGrid(page) {
     await page.goto('/', { waitUntil: 'domcontentloaded' });