feat(fase-9): cap reading column at max-w-2xl on desktop detail routes

Closes 9.2 (desktop reading width).

- (app)/+layout.svelte wraps detail routes (/lists/[id], /tasks/[id],
  /notes/[id]) in a max-w-2xl mx-auto container at the md breakpoint
  and up. Mobile (<md) keeps the existing full-width layout — the
  wrapper only kicks in via md:max-w-2xl. The shopping session
  (/lists/[id]/session) is explicitly excluded so the immersive mode
  still occupies the whole viewport.
- A new readingRoutePattern lives alongside the existing
  detailRoutePattern so the two concerns stay independently testable
  (detail = hide global top bar; reading = cap width).
- RW-01..RW-03 in tests/e2e/reading-width.test.ts measure the
  bounding box of [data-testid="reading-column"] under 1280px and
  390px viewports, and confirm the wrapper is absent from /session.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

apps/web/tests/e2e/reading-width.test.ts

@@ -0,0 +1,78 @@
+/**
+ * RW-series: Desktop reading-width cap (Fase 9.2).
+ *
+ *   RW-01 detail routes (/lists/[id], /tasks/[id], /notes/[id]) cap the
+ *         content column at max-w-2xl on >=md viewports — measured by the
+ *         main element's bounding box being narrower than a 1280px viewport.
+ *   RW-02 mobile viewports (<md) keep the content full-width.
+ *   RW-03 shopping session (/lists/[id]/session) stays full-width on desktop
+ *         because the mode is immersive.
+ */
+import { test, expect, type Page } from '@playwright/test';
+import { USERS } from '../fixtures/users.js';
+import { loginAs } from '../fixtures/login.js';
+
+const DESKTOP = { width: 1280, height: 900 };
+const MOBILE = { width: 390, height: 800 };
+
+/** max-w-2xl in Tailwind = 42rem = 672px. */
+const READING_WIDTH = 672;
+
+async function firstListId(page: Page): Promise<string> {
+	await page.goto('/lists');
+	// Click any list card to get into a detail route.
+	const card = page.getByRole('heading', { level: 3 }).or(page.getByRole('heading', { level: 2 })).first();
+	await expect(card).toBeVisible({ timeout: 10_000 });
+	await card.click();
+	await page.waitForURL(/\/lists\/[0-9a-f-]+\/?$/, { timeout: 10_000 });
+	const url = new URL(page.url());
+	const segments = url.pathname.split('/');
+	return segments[segments.indexOf('lists') + 1];
+}
+
+test.describe('Reading width — desktop max-w-2xl cap', () => {
+	test('RW-01: list detail page caps content at max-w-2xl on desktop', async ({ browser }) => {
+		const ctx = await browser.newContext({ viewport: DESKTOP });
+		const page = await ctx.newPage();
+		await loginAs(page, USERS.ana);
+		await firstListId(page);
+
+		// The detail content should live inside an element whose width is
+		// capped at max-w-2xl (672px). We assert the inner scroll container
+		// reports a width <= 672 + slack for padding.
+		const wrapper = page.locator('[data-testid="reading-column"]').first();
+		await expect(wrapper).toBeVisible({ timeout: 10_000 });
+		const box = await wrapper.boundingBox();
+		expect(box).not.toBeNull();
+		expect(box!.width).toBeLessThanOrEqual(READING_WIDTH + 4);
+
+		await ctx.close();
+	});
+
+	test('RW-02: list detail page is full-width on mobile (<md)', async ({ browser }) => {
+		const ctx = await browser.newContext({ viewport: MOBILE });
+		const page = await ctx.newPage();
+		await loginAs(page, USERS.ana);
+		await firstListId(page);
+
+		const wrapper = page.locator('[data-testid="reading-column"]').first();
+		await expect(wrapper).toBeVisible({ timeout: 10_000 });
+		const box = await wrapper.boundingBox();
+		expect(box).not.toBeNull();
+		// Mobile viewport is 390 — wrapper should fill it (allow some padding).
+		expect(box!.width).toBeGreaterThan(380);
+		await ctx.close();
+	});
+
+	test('RW-03: shopping session stays full-width on desktop (immersive)', async ({ browser }) => {
+		const ctx = await browser.newContext({ viewport: DESKTOP });
+		const page = await ctx.newPage();
+		await loginAs(page, USERS.ana);
+		const id = await firstListId(page);
+		await page.goto(`/lists/${id}/session`);
+		// The session view is allowed to occupy the full viewport. The
+		// reading-column wrapper must NOT be present in this route.
+		await expect(page.locator('[data-testid="reading-column"]')).toHaveCount(0);
+		await ctx.close();
+	});
+});