Measure the overflow the long tags add, not the page's absolute overflow

The first version of this spec asserted zero horizontal overflow outright. In CI
it failed with 35px — the same figure `hidden-books.spec.ts:252` reports, on a
different spec and a different navigation, with the tag row stubbed to a known
state. The CI fixture's detail page carries ~35px of overflow from a cause that
has nothing to do with tags (notes/e2e-mobile-overflow-ci-triage.md).

An absolute assertion there is permanently red for an unrelated reason and says
nothing about the pills. Measure the delta instead: render the page with its own
tags, measure, swap in the pathological ones, measure again, and require the
long tags to add nothing. Pre-fix that delta is 323px (324 on mobile); post-fix
it is 0, on any baseline.

`pageOverflow` splits out of `assertNoHorizontalOverflow` so a spec can compare
two renders instead of asserting a global property.

Author: new-usemame

frontend/e2e/book-detail.spec.ts

@@ -1,5 +1,5 @@
 import { test, expect, Page } from '@playwright/test';
-import { collectPageErrors, assertNoPageErrors, assertNoHorizontalOverflow } from './utils';
+import { collectPageErrors, assertNoPageErrors, assertNoHorizontalOverflow, pageOverflow } from './utils';
 
 /*
  * Book-detail completeness pass:
@@ -192,7 +192,13 @@ test('book detail with a "More by" strip has no horizontal overflow on mobile',
 // specs — all of which log in as admin — never saw this.
 //
 // Deterministic on any seed: the role and the tag list are both stubbed.
-test('long tag names do not push the read-only detail page into horizontal scroll', async ({ page }) => {
+//
+// Measures the DELTA the long tags add, not absolute overflow. The CI fixture's
+// detail page carries ~35px of horizontal overflow from an unrelated cause
+// (notes/e2e-mobile-overflow-ci-triage.md), and an absolute assertion here would
+// fail on that instead of on the tag row, reporting nothing about the pills. The
+// delta is what this fix owns: pre-fix it was ~300px, post-fix it is 0.
+test('long tag names add no horizontal overflow to the read-only detail page', async ({ page }) => {
   await page.setViewportSize({ width: 390, height: 844 });
   await page.goto('/app');
   const bookId = await firstBookId(page);
@@ -207,19 +213,28 @@ test('long tag names do not push the read-only detail page into horizontal scrol
     await route.fulfill({ response: res, json: me });
   });
 
+  await page.goto(`/app/book/${bookId}`, { waitUntil: 'domcontentloaded' });
+  await expect(page.locator('main h1')).toBeVisible({ timeout: 10_000 });
+  const baseline = await pageOverflow(page);
+
   // A real LoC heading plus a single unbroken token wider than the viewport.
+  const longTag = 'France -- History -- Revolution, 1789-1799 -- Fiction';
   await page.route(`**/api/v1/books/${bookId}`, async (route) => {
     const res = await route.fetch();
     const book = await res.json();
     book.tags = [
-      { id: 990001, name: 'France -- History -- Revolution, 1789-1799 -- Fiction' },
+      { id: 990001, name: longTag },
       { id: 990002, name: 'Bildungsroman'.repeat(8) },
     ];
     await route.fulfill({ response: res, json: book });
   });
 
-  await page.goto(`/app/book/${bookId}`, { waitUntil: 'domcontentloaded' });
-  await expect(page.locator('#book-tags')).toBeVisible({ timeout: 10_000 });
-  await expect(page.getByText('France -- History -- Revolution, 1789-1799 -- Fiction')).toBeVisible();
-  await assertNoHorizontalOverflow(page);
+  await page.reload({ waitUntil: 'domcontentloaded' });
+  await expect(page.getByText(longTag)).toBeVisible({ timeout: 10_000 });
+  const withLongTags = await pageOverflow(page);
+
+  expect(
+    withLongTags - baseline,
+    `long tags widened the page by ${withLongTags - baseline}px (baseline ${baseline}px)`,
+  ).toBeLessThanOrEqual(1);
 });

frontend/e2e/utils.ts

@@ -26,9 +26,17 @@ export function assertNoPageErrors(errors: string[]) {
 /** No horizontal body overflow — the signature of the mobile-reflow regressions
  *  (#288 banner, #576 drawer, edit-cover at 375px). */
 export async function assertNoHorizontalOverflow(page: Page) {
-  const overflow = await page.evaluate(() => {
+  const overflow = await pageOverflow(page);
+  expect(overflow, 'page scrolls horizontally (mobile reflow regression)').toBeLessThanOrEqual(1);
+}
+
+/** Horizontal overflow in px, for specs that need to compare one render against
+ *  another rather than assert the absolute property. Asserting "no overflow at
+ *  all" makes a spec fail for any unrelated overflow the page happens to carry,
+ *  which tells you nothing about the element under test. */
+export async function pageOverflow(page: Page): Promise<number> {
+  return page.evaluate(() => {
     const el = document.documentElement;
     return el.scrollWidth - el.clientWidth;
   });
-  expect(overflow, 'page scrolls horizontally (mobile reflow regression)').toBeLessThanOrEqual(1);
 }