From cfbe05224251df44e02b4f5454fcc7d12de4d4e9 Mon Sep 17 00:00:00 2001
From: Ilia Denisov <evilcart@gmail.com>
Date: Wed, 27 May 2026 18:11:00 +0200
Subject: [PATCH 1/2] =?UTF-8?q?feat(ui):=20F8-09=20=E2=80=94=20turn=20repo?=
 =?UTF-8?q?rt=20sticky=20icon-popup=20section=20menu=20(#52)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Replace the 14 rem sticky sidebar (and its mobile <select> twin)
  with a single sticky icon-popup trigger pinned to the top-right
  corner of the report column. Trigger shows `≡` followed by the
  currently active section title (CSS-clamped with text-overflow:
  ellipsis so long RU titles cannot bloat the button). Click opens
  an anchored popover on desktop and a fixed bottom-sheet on
  <768.98 px (mirrors lib/active-view/map-toggles.svelte).
- Each menuitem closes the popover and scrolls the matching
  `<section id="report-<slug>">` into view. The scroll is deferred
  one animation frame so the surface unmount + restoreFocus's
  focus restoration on the (sticky) trigger commit first; otherwise
  the focus call could cancel the just-started smooth/instant
  scroll under desktop Chromium and WebKit.
- Drop the in-report "Back to map" button — the same affordance
  lives in the app-shell view menu (tests/e2e/game-shell.spec.ts
  covers it).
- Tighten the report grid to a single flex column so the section
  body now occupies the full container width.
- i18n: remove game.report.back_to_map and
  game.report.toc.mobile_label; add game.report.toc.open and
  game.report.toc.close (mirrors game.map.toggles.open/close).
- Tests: Vitest report-toc.test.ts rewritten for the new icon-popup
  contract; Playwright report-sections.spec.ts switches the anchor
  loop to trigger → menuitem and adds a mobile bottom-sheet
  assertion; game-shell-stubs.test.ts no longer asserts the
  back-to-map button on the report orchestrator.
- Docs: ui/docs/report-view.md (TOC + i18n + test seams) and
  docs/FUNCTIONAL{,_ru}.md §6.4 updated. The stale SvelteKit
  Snapshot reference (the route file was removed by the single-URL
  app-shell) is dropped at the same time.

Refs: #52 (#43 umbrella).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 docs/FUNCTIONAL.md                            |  13 +-
 docs/FUNCTIONAL_ru.md                         |  10 +-
 ui/docs/report-view.md                        |  75 +++--
 ui/frontend/src/lib/active-view/report.svelte |  22 +-
 .../lib/active-view/report/report-toc.svelte  | 301 ++++++++++--------
 ui/frontend/src/lib/i18n/locales/en.ts        |   4 +-
 ui/frontend/src/lib/i18n/locales/ru.ts        |   4 +-
 ui/frontend/tests/e2e/report-sections.spec.ts |  82 ++---
 ui/frontend/tests/game-shell-stubs.test.ts    |   6 +-
 ui/frontend/tests/report-toc.test.ts          | 187 ++++++-----
 10 files changed, 383 insertions(+), 321 deletions(-)

diff --git a/docs/FUNCTIONAL.md b/docs/FUNCTIONAL.md
index fb3b8a0..06867dd 100644
--- a/docs/FUNCTIONAL.md
+++ b/docs/FUNCTIONAL.md
@@ -694,10 +694,15 @@ The web client renders the report as one section per FBS array
 foreign ship classes, battles, bombings, approaching groups, my /
 foreign / uninhabited / unknown planets, ships in production,
 cargo routes, my fleets, my / foreign / unidentified ship groups).
-Empty sections render explicit empty-state copy. Section anchors
-are exposed in a sticky table of contents (a `<select>` on mobile)
-and the scroll position is preserved across active-view switches
-via SvelteKit's `Snapshot` API.
+Empty sections render explicit empty-state copy. Section
+navigation is exposed through a sticky icon-popup menu pinned to
+the top-right of the report column (an anchored popover on desktop
+and a fixed bottom-sheet on mobile); the trigger label tracks the
+section currently in view, and picking a menuitem scrolls the
+matching section into view. Re-entering the report active view
+remounts the component and resets the scroll position; the active
+highlight is re-derived from the IntersectionObserver as the user
+scrolls.
 
 The Bombings section is a flat read-only table — one row per
 bombing event, columns for `attacker`, `attack_power`, `wiped`
diff --git a/docs/FUNCTIONAL_ru.md b/docs/FUNCTIONAL_ru.md
index 0429bef..ae233f3 100644
--- a/docs/FUNCTIONAL_ru.md
+++ b/docs/FUNCTIONAL_ru.md
@@ -713,9 +713,13 @@ Web-клиент рендерит отчёт как одну секцию на 
 группы, мои / чужие / необитаемые / неопознанные планеты, корабли в
 производстве, грузовые маршруты, мои флоты, мои / чужие /
 неопознанные группы кораблей). Пустые секции получают явную копию
-empty-state. Якоря секций отображены в sticky-TOC (на мобильном —
-`<select>`); позиция скролла сохраняется при переключении активного
-представления через SvelteKit `Snapshot` API.
+empty-state. Навигация по секциям — sticky icon-popup в правом
+верхнем углу колонки отчёта (анкорный popover на десктопе и фикс.
+bottom-sheet на мобильном); подпись на кнопке отслеживает раздел,
+который сейчас в зоне видимости, выбор пункта меню — скролл к
+нужной секции. При возврате в активный вью отчёт перемонтируется,
+позиция скролла сбрасывается к началу, а IntersectionObserver
+заново рассчитывает подсветку при прокрутке.
 
 Секция бомбардировок — это плоская read-only-таблица: одна строка на
 событие, колонки `attacker`, `attack_power`, признак `wiped` и
diff --git a/ui/docs/report-view.md b/ui/docs/report-view.md
index da4f074..6822ee7 100644
--- a/ui/docs/report-view.md
+++ b/ui/docs/report-view.md
@@ -15,7 +15,7 @@ section column.
 
 ```
 report.svelte
-├── report/report-toc.svelte           // anchor list + mobile <select>
+├── report/report-toc.svelte           // sticky icon-popup section menu
 ├── report/section-galaxy-summary.svelte
 ├── report/section-votes.svelte
 ├── report/section-player-status.svelte
@@ -85,27 +85,35 @@ the body — both surfaces stay in sync by construction.
 
 ## Table of contents and active highlight
 
-`report/report-toc.svelte` renders two surfaces driven by the same
-entry list:
+`report/report-toc.svelte` renders a single sticky icon-popup
+trigger in the top-right corner of the report column. The trigger
+shows `≡` followed by the title of the currently-active section
+(CSS-clamped with `text-overflow: ellipsis` so a long RU title
+cannot bloat the button). Clicking opens an anchored popover
+(`role="menu"`) that lists every section as a `role="menuitem"`
+button; the active item gets `aria-current="location"` and the
+`.active` class. A click on an item closes the popover and scrolls
+the matching `<section id="report-<slug>">` into view via
+`scrollIntoView` (with `prefers-reduced-motion` falling back to
+`behavior: "auto"`).
 
-- **Desktop / tablet sidebar** — sticky `<aside>` with vertical
-  anchor list. The anchor for the currently-visible section gets
-  `aria-current="location"` and an `.active` CSS class.
-- **Mobile (< 768 px)** — the desktop sidebar is hidden via CSS
-  and a sticky `<select>` takes its place at the top of the body.
-  Picking an option scrolls the matching section into view. The
-  mobile contract intentionally avoids stacking another overlay on
-  top of the existing layout-owned bottom-tabs.
+On viewports below `768.98 px` the same surface re-styles into a
+fixed bottom-sheet anchored above the layout-owned bottom-tabs
+bar (mirrors `lib/active-view/map-toggles.svelte`), so the same
+trigger and the same menuitem list serve desktop and mobile.
 
-Both surfaces also expose a "Back to map" affordance
-(`report-back-to-map`) at the top.
+Open/close state matches the `map-toggles.svelte` precedent:
+Escape closes, outside click closes, item-pick closes. The
+`restoreFocus` action returns keyboard focus to the trigger on
+dismount. The menu is non-modal — no focus trap.
 
 The active slug is computed by an `IntersectionObserver` rooted on
 the viewport (`root: null`) with `rootMargin: "-30% 0px -60% 0px"`.
 The skew biases the active band toward the upper third of the
 visible area so that scrolling down advances the highlight
 naturally. The observer is created on mount and torn down on
-unmount.
+unmount. The TOC itself owns no observer — the orchestrator passes
+`activeSlug` in as a prop.
 
 The in-game shell (`lib/game/game-shell.svelte`)
 expands `<main class="active-view-host">` to fit content rather
@@ -129,8 +137,10 @@ highlight stays consistent without a separate source of truth.
 
 All strings live under `game.report.*`:
 - `game.report.loading` — section loading placeholder.
-- `game.report.back_to_map`, `game.report.toc.title`,
-  `game.report.toc.mobile_label` — shell-level strings.
+- `game.report.toc.title` — `aria-label` on the TOC root;
+  `game.report.toc.open` / `game.report.toc.close` — `aria-label`
+  on the trigger button, swapped by the open state (mirrors
+  `game.map.toggles.open` / `close`).
 - `game.report.section.<slug>.title` — section heading.
 - `game.report.section.<slug>.empty` — empty-state copy (where
   applicable).
@@ -151,19 +161,26 @@ couple them silently.
   shapes: kv-list (`report-section-galaxy-summary.test.ts`), grid
   with conditional row state (`report-section-bombings.test.ts`),
   per-race sub-table (`report-section-foreign-sciences.test.ts`),
-  TOC (`report-toc.test.ts`). Each spec mounts the component
-  against a synthetic `RenderedReportSource`, so the orchestrator
-  / IntersectionObserver are out of scope.
+  TOC (`report-toc.test.ts`). The TOC spec exercises the icon-popup
+  state machine (trigger label, open/close, menuitem list, active
+  highlight, scroll-on-pick, Escape, outside-click). Each spec
+  mounts the component against a synthetic `RenderedReportSource`,
+  so the orchestrator / IntersectionObserver are out of scope.
 - **Playwright** — `tests/e2e/report-sections.spec.ts` exercises
-  the full integration: every TOC anchor lands its section in
-  view, the back-to-map button switches to the map view
-  (`activeView.select("map")`), and the mobile `<select>` scrolls
-  to the chosen section on a narrow viewport. The spec drives the
-  app-shell through `window.__galaxyNav` (the dev-only nav surface)
-  instead of `page.goto` per-view URLs. The old "scroll position
-  survives a `/map` round-trip via SvelteKit `Snapshot`" case was
-  dropped — see the [scroll position](#scroll-position) note.
+  the full integration: every popover menuitem click lands its
+  section in view and closes the popover, and on the
+  `chromium-mobile` project the same trigger surfaces a fixed
+  bottom-sheet popover instead of the anchored desktop variant.
+  The spec drives the app-shell through `window.__galaxyNav` (the
+  dev-only nav surface) instead of `page.goto` per-view URLs. The
+  old "scroll position survives a `/map` round-trip via SvelteKit
+  `Snapshot`" case was dropped — see the
+  [scroll position](#scroll-position) note. F8-09 also removed the
+  in-report "Back to map" test; the same affordance is exercised
+  through the app-shell view menu by `tests/e2e/game-shell.spec.ts`
+  ("header view-menu navigates to every active view").
 
 Test IDs follow the pattern `report-section-<slug>` for section
-roots, `report-toc-<slug>` for TOC anchors, and per-section row
-identifiers (e.g. `report-bombing-row`, `my-planets-row`).
+roots, `report-toc-trigger` / `report-toc-surface` for the popup
+shell, `report-toc-item-<slug>` for each menuitem, and per-section
+row identifiers (e.g. `report-bombing-row`, `my-planets-row`).
diff --git a/ui/frontend/src/lib/active-view/report.svelte b/ui/frontend/src/lib/active-view/report.svelte
index 74003c8..11330a7 100644
--- a/ui/frontend/src/lib/active-view/report.svelte
+++ b/ui/frontend/src/lib/active-view/report.svelte
@@ -135,20 +135,11 @@ TOC and the body iterate the same data.
 
 <style>
 	.report-view {
-		display: grid;
-		grid-template-columns: 14rem 1fr;
-		gap: 1.25rem;
+		display: flex;
+		flex-direction: column;
 		padding: 1rem 1.25rem 2rem;
 		font-family: system-ui, sans-serif;
 	}
-	.report-view > :global(.report-toc) {
-		position: sticky;
-		top: 0;
-		align-self: start;
-		padding: 0.5rem 0;
-		max-height: calc(100vh - 4rem);
-		overflow-y: auto;
-	}
 	.report-body {
 		min-width: 0;
 		display: flex;
@@ -157,16 +148,7 @@ TOC and the body iterate the same data.
 	}
 	@media (max-width: 767.98px) {
 		.report-view {
-			grid-template-columns: 1fr;
 			padding: 0.75rem;
-			gap: 0.75rem;
-		}
-		.report-view > :global(.report-toc) {
-			position: sticky;
-			top: 0;
-			background: var(--color-bg);
-			padding: 0.5rem 0;
-			z-index: 5;
 		}
 	}
 </style>
diff --git a/ui/frontend/src/lib/active-view/report/report-toc.svelte b/ui/frontend/src/lib/active-view/report/report-toc.svelte
index c8ab49a..e267cef 100644
--- a/ui/frontend/src/lib/active-view/report/report-toc.svelte
+++ b/ui/frontend/src/lib/active-view/report/report-toc.svelte
@@ -1,28 +1,34 @@
 <!--
-Phase 23 Report View table of contents.
+Turn-report section menu.
 
-Responsibilities:
-- "Back to map" button at the top — visible on both desktop sidebar
-  and mobile sticky toolbar. Switches the active view to the map
-  through `activeView.select("map")`; the shell's tool gate resets
-  the `mobileTool` overlay naturally once the map is no longer the
-  active view.
-- Desktop / tablet sidebar: a vertical list of anchor links, one per
-  section. The active link gets `aria-current="location"` and a
-  `.active` style. Click scrolls the active-view-host (not the
-  window) by calling `scrollIntoView` on the matching section.
-- Mobile (`max-width: 767.98px`): the sidebar collapses to a sticky
-  `<select>` at the top of the body — a minimal contract that does
-  not stack with the layout's bottom-tab bar. The same option list
-  drives both surfaces.
+Replaces the F8-09 era 14 rem sticky sidebar (plus its mobile
+`<select>` twin) with a single sticky icon-popup trigger that sits
+in the top-right corner of the report column. The button shows
+`≡` + the title of the section currently in view, derived from the
+`activeSlug` prop the orchestrator computes through its
+`IntersectionObserver`. Clicking the button opens an anchored menu
+(or a bottom-sheet on `<768.98 px`) that lists every section; a
+click on an item closes the menu and scrolls the matching section
+into view via `scrollIntoView`. The active section gets
+`aria-current="location"` plus the `.active` style.
 
-The active section is computed by the orchestrator
-(`report.svelte`) via `IntersectionObserver` and passed in via the
-`activeSlug` prop. The TOC itself owns no observers.
+The trigger label is clamped with `text-overflow: ellipsis` so a
+long RU title cannot stretch the button. The popover uses the same
+open/close state machine as `lib/active-view/map-toggles.svelte`:
+outside-click + Escape close, focus is restored to the trigger
+through the `restoreFocus` action. No focus trap — the menu is
+non-modal.
+
+The component owns no IntersectionObserver and never sets
+`activeSlug` itself. The orchestrator picks the new active slug up
+naturally as the target section enters the viewport during the
+smooth scroll. The previous "Back to map" affordance was dropped
+in F8-09: that switch is available in the app-shell view menu.
 -->
 <script lang="ts">
-	import { activeView } from "$lib/app-nav.svelte";
+	import { onMount } from "svelte";
 
+	import { restoreFocus } from "$lib/a11y/restore-focus";
 	import { i18n, type TranslationKey } from "$lib/i18n/index.svelte";
 
 	export interface TocEntry {
@@ -37,6 +43,16 @@ The active section is computed by the orchestrator
 
 	let { entries, activeSlug }: Props = $props();
 
+	let open = $state(false);
+	let rootEl: HTMLDivElement | null = $state(null);
+
+	const activeEntry = $derived(
+		entries.find((e) => e.slug === activeSlug) ?? entries[0],
+	);
+	const activeTitle = $derived(
+		activeEntry ? i18n.t(activeEntry.titleKey) : "",
+	);
+
 	function scrollToSlug(slug: string): void {
 		const target = document.getElementById(`report-${slug}`);
 		if (target === null) return;
@@ -49,154 +65,173 @@ The active section is computed by the orchestrator
 		});
 	}
 
-	function onAnchorClick(event: MouseEvent, slug: string): void {
-		event.preventDefault();
-		scrollToSlug(slug);
+	function pickSection(slug: string): void {
+		open = false;
+		// Defer the scroll one frame so Svelte commits the close and
+		// `restoreFocus` returns focus to the trigger first. Without
+		// this, the focus restoration (the trigger is sticky, but its
+		// natural in-flow position is at the top of the report) can
+		// reset the smooth/instant scroll the browser had just begun.
+		requestAnimationFrame(() => scrollToSlug(slug));
 	}
 
-	function onSelectChange(event: Event): void {
-		const select = event.currentTarget as HTMLSelectElement;
-		const slug = select.value;
-		if (slug === "") return;
-		scrollToSlug(slug);
+	function onKeyDown(event: KeyboardEvent): void {
+		if (event.key === "Escape" && open) {
+			open = false;
+		}
 	}
 
-	function backToMap(): void {
-		activeView.select("map");
-	}
+	onMount(() => {
+		const handleClick = (event: MouseEvent): void => {
+			if (!open || rootEl === null) return;
+			const target = event.target;
+			if (target instanceof Node && rootEl.contains(target)) return;
+			open = false;
+		};
+		document.addEventListener("click", handleClick, true);
+		document.addEventListener("keydown", onKeyDown);
+		return () => {
+			document.removeEventListener("click", handleClick, true);
+			document.removeEventListener("keydown", onKeyDown);
+		};
+	});
 </script>
 
-<aside
+<div
 	class="report-toc"
+	bind:this={rootEl}
 	data-testid="report-toc"
 	aria-label={i18n.t("game.report.toc.title")}
 >
 	<button
 		type="button"
-		class="back-to-map"
-		data-testid="report-back-to-map"
-		onclick={() => void backToMap()}
+		class="trigger"
+		data-testid="report-toc-trigger"
+		aria-haspopup="menu"
+		aria-expanded={open}
+		aria-label={open
+			? i18n.t("game.report.toc.close")
+			: i18n.t("game.report.toc.open")}
+		onclick={() => (open = !open)}
 	>
-		← {i18n.t("game.report.back_to_map")}
+		<span class="icon" aria-hidden="true">≡</span>
+		<span class="label">{activeTitle}</span>
 	</button>
-
-	<nav class="desktop" aria-label={i18n.t("game.report.toc.title")}>
-		<ul>
-			{#each entries as entry (entry.slug)}
-				<li>
-					<a
-						href={`#report-${entry.slug}`}
-						class:active={activeSlug === entry.slug}
-						aria-current={activeSlug === entry.slug
-							? "location"
-							: undefined}
-						data-testid="report-toc-{entry.slug}"
-						onclick={(e) => onAnchorClick(e, entry.slug)}
-					>
-						{i18n.t(entry.titleKey)}
-					</a>
-				</li>
-			{/each}
-		</ul>
-	</nav>
-
-	<label class="mobile">
-		<span class="visually-hidden">
-			{i18n.t("game.report.toc.mobile_label")}
-		</span>
-		<select
-			data-testid="report-toc-mobile"
-			value={activeSlug}
-			onchange={onSelectChange}
+	{#if open}
+		<div
+			class="surface"
+			role="menu"
+			data-testid="report-toc-surface"
+			use:restoreFocus
 		>
 			{#each entries as entry (entry.slug)}
-				<option value={entry.slug}>{i18n.t(entry.titleKey)}</option>
+				<button
+					type="button"
+					role="menuitem"
+					class:active={activeSlug === entry.slug}
+					aria-current={activeSlug === entry.slug
+						? "location"
+						: undefined}
+					data-testid="report-toc-item-{entry.slug}"
+					onclick={() => pickSection(entry.slug)}
+				>
+					{i18n.t(entry.titleKey)}
+				</button>
 			{/each}
-		</select>
-	</label>
-</aside>
+		</div>
+	{/if}
+</div>
 
 <style>
 	.report-toc {
-		display: flex;
-		flex-direction: column;
-		gap: 0.75rem;
+		position: sticky;
+		top: 0.5rem;
+		align-self: flex-end;
+		margin-left: auto;
+		z-index: 30;
 		font-family: system-ui, sans-serif;
 	}
-	.back-to-map {
+	.trigger {
+		display: inline-flex;
+		align-items: center;
+		gap: 0.4rem;
+		min-height: 44px;
+		max-width: min(18rem, calc(100vw - 2rem));
+		background: var(--color-surface-overlay);
+		color: var(--color-text);
+		border: 1px solid var(--color-border);
+		border-radius: 6px;
+		padding: 0.25rem 0.6rem;
+		cursor: pointer;
+		font: inherit;
+		font-size: 0.9rem;
+	}
+	.trigger:hover {
+		background: var(--color-surface-hover);
+	}
+	.trigger .icon {
+		flex: 0 0 auto;
+		font-size: 1.1rem;
+		line-height: 1;
+	}
+	.trigger .label {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		min-width: 0;
+	}
+	.surface {
+		position: absolute;
+		top: calc(100% + 0.25rem);
+		right: 0;
+		min-width: 16rem;
+		max-height: calc(100vh - 4rem);
+		display: flex;
+		flex-direction: column;
+		gap: 0.1rem;
+		background: var(--color-surface-overlay);
+		color: var(--color-text);
+		border: 1px solid var(--color-border);
+		border-radius: 6px;
+		box-shadow: var(--shadow-lg);
+		padding: 0.35rem;
+		overflow-y: auto;
+		z-index: 50;
+	}
+	.surface [role="menuitem"] {
+		text-align: left;
+		background: transparent;
+		color: var(--color-text-muted);
+		border: 0;
+		border-left: 2px solid transparent;
+		border-radius: 0 3px 3px 0;
+		padding: 0.3rem 0.6rem;
 		font: inherit;
 		font-size: 0.85rem;
-		text-align: left;
-		padding: 0.4rem 0.6rem;
-		background: var(--color-surface);
-		color: var(--color-accent);
-		border: 1px solid var(--color-border);
-		border-radius: 3px;
+		line-height: 1.3;
 		cursor: pointer;
 	}
-	.back-to-map:hover {
+	.surface [role="menuitem"]:hover {
 		background: var(--color-surface-hover);
 		color: var(--color-text);
 	}
-	.desktop {
-		display: block;
-	}
-	.desktop ul {
-		list-style: none;
-		padding: 0;
-		margin: 0;
-		display: flex;
-		flex-direction: column;
-		gap: 0.15rem;
-	}
-	.desktop a {
-		display: block;
-		padding: 0.3rem 0.6rem;
-		color: var(--color-text-muted);
-		text-decoration: none;
-		font-size: 0.85rem;
-		line-height: 1.3;
-		border-left: 2px solid transparent;
-		border-radius: 0 3px 3px 0;
-	}
-	.desktop a:hover {
-		color: var(--color-text);
-		background: var(--color-surface);
-	}
-	.desktop a.active {
+	.surface [role="menuitem"].active {
 		color: var(--color-text);
 		background: var(--color-surface);
 		border-left-color: var(--color-accent);
 	}
-	.mobile {
-		display: none;
-	}
-	.mobile select {
-		width: 100%;
-		font: inherit;
-		padding: 0.4rem 0.5rem;
-		background: var(--color-bg);
-		color: var(--color-text);
-		border: 1px solid var(--color-border);
-		border-radius: 3px;
-	}
-	.visually-hidden {
-		position: absolute;
-		width: 1px;
-		height: 1px;
-		padding: 0;
-		margin: -1px;
-		overflow: hidden;
-		clip: rect(0, 0, 0, 0);
-		white-space: nowrap;
-		border: 0;
-	}
 	@media (max-width: 767.98px) {
-		.desktop {
-			display: none;
-		}
-		.mobile {
-			display: block;
+		.surface {
+			position: fixed;
+			top: auto;
+			left: 0;
+			right: 0;
+			bottom: 3.25rem;
+			max-height: calc(100vh - 6rem);
+			border-radius: 0;
+			border-left: 0;
+			border-right: 0;
+			box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
 		}
 	}
 </style>
diff --git a/ui/frontend/src/lib/i18n/locales/en.ts b/ui/frontend/src/lib/i18n/locales/en.ts
index 8e51f42..233dbd9 100644
--- a/ui/frontend/src/lib/i18n/locales/en.ts
+++ b/ui/frontend/src/lib/i18n/locales/en.ts
@@ -603,9 +603,9 @@ const en = {
 	"game.inspector.planet.ship_groups.race.unknown": "unknown",
 
 	"game.report.loading": "loading report…",
-	"game.report.back_to_map": "back to map",
 	"game.report.toc.title": "sections",
-	"game.report.toc.mobile_label": "jump to section",
+	"game.report.toc.open": "show section list",
+	"game.report.toc.close": "hide section list",
 	"game.report.section.galaxy_summary.title": "galaxy summary",
 	"game.report.section.galaxy_summary.field.turn": "turn",
 	"game.report.section.galaxy_summary.field.size": "map size",
diff --git a/ui/frontend/src/lib/i18n/locales/ru.ts b/ui/frontend/src/lib/i18n/locales/ru.ts
index a2994e7..729a534 100644
--- a/ui/frontend/src/lib/i18n/locales/ru.ts
+++ b/ui/frontend/src/lib/i18n/locales/ru.ts
@@ -604,9 +604,9 @@ const ru: Record<keyof typeof en, string> = {
 	"game.inspector.planet.ship_groups.race.unknown": "неизвестно",
 
 	"game.report.loading": "загрузка отчёта…",
-	"game.report.back_to_map": "назад к карте",
 	"game.report.toc.title": "разделы",
-	"game.report.toc.mobile_label": "перейти к разделу",
+	"game.report.toc.open": "показать список разделов",
+	"game.report.toc.close": "скрыть список разделов",
 	"game.report.section.galaxy_summary.title": "общие сведения о галактике",
 	"game.report.section.galaxy_summary.field.turn": "ход",
 	"game.report.section.galaxy_summary.field.size": "размер карты",
diff --git a/ui/frontend/tests/e2e/report-sections.spec.ts b/ui/frontend/tests/e2e/report-sections.spec.ts
index b66b816..cfd2074 100644
--- a/ui/frontend/tests/e2e/report-sections.spec.ts
+++ b/ui/frontend/tests/e2e/report-sections.spec.ts
@@ -3,12 +3,16 @@
 // the orchestrator's sections render, then drives the page through
 // the targeted-test contract:
 //
-//   1. Every TOC anchor click scrolls the matching section into view
-//      and the section is present in the DOM with at least one row
-//      (or its empty-state copy when it is intentionally empty).
-//   2. The "back to map" button switches to the map view.
-//   3. The mobile <select> fallback scrolls a section into view on
-//      a narrow viewport.
+//   1. Every TOC menuitem click scrolls the matching section into
+//      view and the section is present in the DOM with at least one
+//      row (or its empty-state copy when it is intentionally empty).
+//   2. On a narrow viewport the same trigger surfaces a bottom-sheet
+//      popover and the same menuitem flow lands the chosen section.
+//
+// F8-09 collapsed the desktop sidebar and mobile `<select>` into a
+// single sticky icon-popup trigger; the in-report "Back to map"
+// button was removed (the affordance lives in the app-shell view
+// menu, exercised by `game-shell.spec.ts`).
 
 import { fromJson, type JsonValue } from "@bufbuild/protobuf";
 import { expect, test, type Page } from "@playwright/test";
@@ -36,9 +40,9 @@ const BATTLE_ID = "00000000-0000-0000-0000-000000000001";
 // SECTIONS lists every TOC slug paired with a row-presence hook.
 // `expectRow` is null for sections that the seeded report
 // intentionally leaves empty so the empty-state copy is asserted
-// instead. The orchestrator's section order must match this
-// list — the spec relies on each slug having a `report-toc-<slug>`
-// and a `report-section-<slug>` testid.
+// instead. The orchestrator's section order must match this list —
+// the spec relies on each slug having a `report-toc-item-<slug>` in
+// the popover and a `report-section-<slug>` testid in the body.
 const SECTIONS: ReadonlyArray<{ slug: string; expectRow: string | null }> = [
 	{ slug: "galaxy-summary", expectRow: "galaxy-summary-field-turn" },
 	{ slug: "votes", expectRow: "votes-mine" },
@@ -226,7 +230,7 @@ async function bootSession(page: Page): Promise<void> {
 }
 
 test.describe("Phase 23 report view", () => {
-	test("every TOC anchor lands its section in view", async ({
+	test("every popover menuitem lands its section in view", async ({
 		page,
 	}, testInfo) => {
 		test.skip(
@@ -252,9 +256,16 @@ test.describe("Phase 23 report view", () => {
 			page.getByTestId("galaxy-summary-field-turn"),
 		).toBeVisible();
 
+		const trigger = page.getByTestId("report-toc-trigger");
+		const surface = page.getByTestId("report-toc-surface");
+
 		for (const entry of SECTIONS) {
-			const anchor = page.getByTestId(`report-toc-${entry.slug}`);
-			await anchor.click();
+			await trigger.click();
+			await expect(surface).toBeVisible();
+			await page.getByTestId(`report-toc-item-${entry.slug}`).click();
+			// The popover closes on selection and the section
+			// scrolls into view.
+			await expect(surface).toHaveCount(0);
 			const section = page.getByTestId(`report-section-${entry.slug}`);
 			await expect(section).toBeInViewport();
 			if (entry.expectRow !== null) {
@@ -280,30 +291,12 @@ test.describe("Phase 23 report view", () => {
 	// scroll-restoration the test asserted exist any more. Re-adding that
 	// behaviour would be a production change outside this test migration.
 
-	test("back-to-map button switches to the map view", async ({
-		page,
-	}, testInfo) => {
-		test.skip(
-			testInfo.project.name.startsWith("chromium-mobile"),
-			"navigation is identical on mobile",
-		);
+	// F8-09 removed the in-report "Back to map" button — the same
+	// affordance lives in the app-shell view menu, exercised by
+	// `game-shell.spec.ts` ("header view-menu navigates to every
+	// active view").
 
-		await mockGateway(page);
-		await bootSession(page);
-		await page.goto("/");
-		await page.waitForFunction(() => window.__galaxyNav !== undefined);
-		await page.evaluate(
-			(id) => window.__galaxyNav!.enterGame(id, "report", {}),
-			GAME_ID,
-		);
-
-		await page.getByTestId("report-back-to-map").click();
-		// The single-URL app-shell keeps the address bar at the app base;
-		// the active map view is the navigation signal.
-		await expect(page.getByTestId("active-view-map")).toBeVisible();
-	});
-
-	test("mobile select scrolls to the chosen section", async ({
+	test("mobile bottom-sheet popover lands the chosen section", async ({
 		page,
 	}, testInfo) => {
 		test.skip(
@@ -320,12 +313,25 @@ test.describe("Phase 23 report view", () => {
 			GAME_ID,
 		);
 
-		const mobileSelect = page.getByTestId("report-toc-mobile");
-		await expect(mobileSelect).toBeVisible();
 		await expect(
 			page.getByTestId("galaxy-summary-field-turn"),
 		).toBeVisible();
-		await mobileSelect.selectOption("bombings");
+
+		const trigger = page.getByTestId("report-toc-trigger");
+		await expect(trigger).toBeVisible();
+		await trigger.click();
+
+		const surface = page.getByTestId("report-toc-surface");
+		await expect(surface).toBeVisible();
+		// Below 768 px the surface re-styles into a fixed
+		// bottom-sheet anchored above the bottom-tabs bar.
+		const position = await surface.evaluate(
+			(el) => getComputedStyle(el).position,
+		);
+		expect(position).toBe("fixed");
+
+		await page.getByTestId("report-toc-item-bombings").click();
+		await expect(surface).toHaveCount(0);
 		await expect(
 			page.getByTestId("report-section-bombings"),
 		).toBeInViewport();
diff --git a/ui/frontend/tests/game-shell-stubs.test.ts b/ui/frontend/tests/game-shell-stubs.test.ts
index 6b27a80..40bbd31 100644
--- a/ui/frontend/tests/game-shell-stubs.test.ts
+++ b/ui/frontend/tests/game-shell-stubs.test.ts
@@ -63,17 +63,19 @@ describe("active-view stubs", () => {
 		expect(node).toHaveTextContent("ship groups");
 	});
 
-	test("report view mounts with the TOC and the back-to-map link", () => {
+	test("report view mounts with the icon-popup TOC", () => {
 		// Phase 23 replaces the Phase 10 stub with the full report
 		// orchestrator. The orchestrator mounts the table of contents
 		// regardless of report state; the inner sections render
 		// loading copy until a `RenderedReportSource` lands via
 		// context. This test only smokes the orchestrator scaffold —
 		// per-section assertions live in `report-section-*.test.ts`.
+		// F8-09 collapsed the TOC into a single sticky icon-popup
+		// trigger; "Back to map" lives in the app-shell view menu.
 		const r = render(ReportView);
 		expect(r.getByTestId("active-view-report")).toBeInTheDocument();
 		expect(r.getByTestId("report-toc")).toBeInTheDocument();
-		expect(r.getByTestId("report-back-to-map")).toBeInTheDocument();
+		expect(r.getByTestId("report-toc-trigger")).toBeInTheDocument();
 	});
 
 	test("mail stub renders its localised title", () => {
diff --git a/ui/frontend/tests/report-toc.test.ts b/ui/frontend/tests/report-toc.test.ts
index a9d09ab..1b7f3ee 100644
--- a/ui/frontend/tests/report-toc.test.ts
+++ b/ui/frontend/tests/report-toc.test.ts
@@ -1,9 +1,10 @@
-// Vitest coverage for the Phase 23 Report View's table of contents.
-// Smokes the anchor list, the active-link state, the back-to-map
-// navigation, and the mobile <select> fallback. The
-// IntersectionObserver-driven active-section computation lives in
-// the orchestrator (`report.svelte`); this test only checks the
-// presentational pieces of the TOC.
+// Vitest coverage for the F8-09 turn-report icon-popup section menu.
+// Smokes the sticky trigger, its active-title label, the open/close
+// state machine, popover items + active highlight, scroll-on-pick,
+// and the Escape + outside-click dismissal paths. The
+// IntersectionObserver-driven `activeSlug` is computed by the
+// orchestrator (`report.svelte`) and passed in via prop; the TOC
+// itself owns no observers.
 
 import "@testing-library/jest-dom/vitest";
 import { fireEvent, render } from "@testing-library/svelte";
@@ -12,15 +13,6 @@ import { beforeEach, describe, expect, test, vi } from "vitest";
 import { i18n } from "../src/lib/i18n/index.svelte";
 import type { TranslationKey } from "../src/lib/i18n/index.svelte";
 
-// The TOC's "back to map" button switches the active in-game view via
-// `activeView.select("map")` (the single-URL app-shell has no
-// `/games/:id/map` route). Mock the nav store so the spy captures the
-// view switch and no real `pushState` runs.
-const activeViewSelectMock = vi.hoisted(() => vi.fn());
-vi.mock("$lib/app-nav.svelte", () => ({
-	activeView: { select: activeViewSelectMock },
-}));
-
 import ReportToc, {
 	type TocEntry,
 } from "../src/lib/active-view/report/report-toc.svelte";
@@ -31,124 +23,143 @@ const ENTRIES: readonly TocEntry[] = [
 	{ slug: "bombings", titleKey: "game.report.section.bombings.title" },
 ];
 
+function stubReducedMotion(reduce: boolean): void {
+	Object.defineProperty(window, "matchMedia", {
+		writable: true,
+		value: (query: string) => ({
+			matches: reduce && query.includes("reduce"),
+			media: query,
+			onchange: null,
+			addListener: () => {},
+			removeListener: () => {},
+			addEventListener: () => {},
+			removeEventListener: () => {},
+			dispatchEvent: () => false,
+		}),
+	});
+}
+
 beforeEach(() => {
 	i18n.resetForTests("en");
-	activeViewSelectMock.mockClear();
 });
 
-describe("report TOC", () => {
-	test("renders one anchor per entry and one option in the mobile select", () => {
+describe("report TOC (icon-popup)", () => {
+	test("renders the trigger with the active section title; popover closed by default", () => {
 		const ui = render(ReportToc, {
 			props: { entries: ENTRIES, activeSlug: "galaxy-summary" },
 		});
-		for (const e of ENTRIES) {
-			expect(ui.getByTestId(`report-toc-${e.slug}`)).toBeInTheDocument();
-		}
-		const mobile = ui.getByTestId("report-toc-mobile") as HTMLSelectElement;
-		expect(mobile.options).toHaveLength(ENTRIES.length);
-		expect(mobile.value).toBe("galaxy-summary");
+		const trigger = ui.getByTestId("report-toc-trigger");
+		expect(trigger).toHaveAttribute("aria-haspopup", "menu");
+		expect(trigger).toHaveAttribute("aria-expanded", "false");
+		expect(trigger).toHaveTextContent("galaxy summary");
+		expect(ui.queryByTestId("report-toc-surface")).toBeNull();
 	});
 
-	test("marks the active anchor with aria-current=location and a class", () => {
+	test("clicking the trigger opens the popover with one menuitem per entry", async () => {
+		const ui = render(ReportToc, {
+			props: { entries: ENTRIES, activeSlug: "galaxy-summary" },
+		});
+		await fireEvent.click(ui.getByTestId("report-toc-trigger"));
+		expect(ui.getByTestId("report-toc-trigger")).toHaveAttribute(
+			"aria-expanded",
+			"true",
+		);
+		const surface = ui.getByTestId("report-toc-surface");
+		expect(surface).toHaveAttribute("role", "menu");
+		for (const entry of ENTRIES) {
+			const item = ui.getByTestId(`report-toc-item-${entry.slug}`);
+			expect(item).toHaveAttribute("role", "menuitem");
+		}
+	});
+
+	test("marks the active item with aria-current=location and .active", async () => {
 		const ui = render(ReportToc, {
 			props: { entries: ENTRIES, activeSlug: "bombings" },
 		});
-		const active = ui.getByTestId("report-toc-bombings");
+		await fireEvent.click(ui.getByTestId("report-toc-trigger"));
+		const active = ui.getByTestId("report-toc-item-bombings");
 		expect(active).toHaveAttribute("aria-current", "location");
 		expect(active).toHaveClass("active");
 
-		const inactive = ui.getByTestId("report-toc-votes");
+		const inactive = ui.getByTestId("report-toc-item-votes");
 		expect(inactive).not.toHaveAttribute("aria-current");
 		expect(inactive).not.toHaveClass("active");
 	});
 
-	test("back-to-map button switches the active view to the map", async () => {
+	test("trigger label tracks activeSlug across re-renders", async () => {
 		const ui = render(ReportToc, {
-			props: {
-				entries: ENTRIES,
-				activeSlug: "galaxy-summary",
-			},
+			props: { entries: ENTRIES, activeSlug: "galaxy-summary" },
 		});
-		const button = ui.getByTestId("report-back-to-map");
-		await fireEvent.click(button);
-		expect(activeViewSelectMock).toHaveBeenCalledWith("map");
+		expect(ui.getByTestId("report-toc-trigger")).toHaveTextContent(
+			"galaxy summary",
+		);
+		await ui.rerender({ entries: ENTRIES, activeSlug: "votes" });
+		expect(ui.getByTestId("report-toc-trigger")).toHaveTextContent("votes");
 	});
 
-	test("anchor click cancels the default jump and calls scrollIntoView on the target", async () => {
-		// Stub `scrollIntoView` on the target — jsdom does not
-		// implement it. The TOC also reads
-		// `prefers-reduced-motion`; the matchMedia stub forces a
-		// stable `behavior: "auto"` so the assertion is reproducible.
+	test("clicking a menuitem scrolls the target into view and closes the popover", async () => {
+		// jsdom does not implement `scrollIntoView`; stub it on the
+		// section the spec is about to pick. `matchMedia` is forced to
+		// `reduce` so the assertion stays stable.
 		const scrollSpy = vi.fn();
 		const target = document.createElement("section");
 		target.id = "report-bombings";
 		target.scrollIntoView = scrollSpy;
 		document.body.appendChild(target);
-
-		Object.defineProperty(window, "matchMedia", {
-			writable: true,
-			value: (query: string) => ({
-				matches: query.includes("reduce"),
-				media: query,
-				onchange: null,
-				addListener: () => {},
-				removeListener: () => {},
-				addEventListener: () => {},
-				removeEventListener: () => {},
-				dispatchEvent: () => false,
-			}),
-		});
+		stubReducedMotion(true);
 
 		const ui = render(ReportToc, {
 			props: { entries: ENTRIES, activeSlug: "galaxy-summary" },
 		});
-		await fireEvent.click(ui.getByTestId("report-toc-bombings"));
+		await fireEvent.click(ui.getByTestId("report-toc-trigger"));
+		await fireEvent.click(ui.getByTestId("report-toc-item-bombings"));
+		// The component defers `scrollIntoView` one frame so the
+		// surface unmount + focus restoration run first. Flush the
+		// frame before asserting.
+		await new Promise<void>((resolve) =>
+			requestAnimationFrame(() => resolve()),
+		);
+
 		expect(scrollSpy).toHaveBeenCalledWith({
 			behavior: "auto",
 			block: "start",
 		});
+		expect(ui.queryByTestId("report-toc-surface")).toBeNull();
+		expect(ui.getByTestId("report-toc-trigger")).toHaveAttribute(
+			"aria-expanded",
+			"false",
+		);
 		target.remove();
 	});
 
-	test("mobile select scrolls to the chosen section without navigating", async () => {
-		const scrollSpy = vi.fn();
-		const target = document.createElement("section");
-		target.id = "report-votes";
-		target.scrollIntoView = scrollSpy;
-		document.body.appendChild(target);
-
-		Object.defineProperty(window, "matchMedia", {
-			writable: true,
-			value: () => ({
-				matches: false,
-				media: "(prefers-reduced-motion: no-preference)",
-				onchange: null,
-				addListener: () => {},
-				removeListener: () => {},
-				addEventListener: () => {},
-				removeEventListener: () => {},
-				dispatchEvent: () => false,
-			}),
+	test("Escape closes the popover", async () => {
+		const ui = render(ReportToc, {
+			props: { entries: ENTRIES, activeSlug: "galaxy-summary" },
 		});
+		await fireEvent.click(ui.getByTestId("report-toc-trigger"));
+		expect(ui.getByTestId("report-toc-surface")).toBeInTheDocument();
+		await fireEvent.keyDown(document, { key: "Escape" });
+		expect(ui.queryByTestId("report-toc-surface")).toBeNull();
+	});
+
+	test("outside click closes the popover", async () => {
+		const outside = document.createElement("button");
+		document.body.appendChild(outside);
 
 		const ui = render(ReportToc, {
-			props: {
-				entries: ENTRIES,
-				activeSlug: "galaxy-summary",
-			},
+			props: { entries: ENTRIES, activeSlug: "galaxy-summary" },
 		});
-		const select = ui.getByTestId("report-toc-mobile") as HTMLSelectElement;
-		await fireEvent.change(select, { target: { value: "votes" } });
-		expect(scrollSpy).toHaveBeenCalled();
-		expect(activeViewSelectMock).not.toHaveBeenCalled();
-		target.remove();
+		await fireEvent.click(ui.getByTestId("report-toc-trigger"));
+		expect(ui.getByTestId("report-toc-surface")).toBeInTheDocument();
+		await fireEvent.click(outside);
+		expect(ui.queryByTestId("report-toc-surface")).toBeNull();
+
+		outside.remove();
 	});
 
-	// Tests intentionally validate the *type* of the entries prop is
-	// exposed correctly so future widening of the list does not
-	// silently drop entries. TypeScript already enforces this through
-	// `TocEntry`; the assertion below is a soft check so a stray
-	// `as unknown as ...` cast surfaces fast.
+	// Soft type-level check: a stray `as unknown as ...` cast on
+	// `TocEntry` would silently widen the prop shape — assert the
+	// runtime values look as expected.
 	test("TocEntry exposes a slug and a TranslationKey", () => {
 		const slug: string = ENTRIES[0]!.slug;
 		const key: TranslationKey = ENTRIES[0]!.titleKey;
-- 
2.52.0


From 1b2c13ecd66b8056f2acc4a3a1c9fdfdb1d87310 Mon Sep 17 00:00:00 2001
From: Ilia Denisov <evilcart@gmail.com>
Date: Wed, 27 May 2026 19:45:44 +0200
Subject: [PATCH 2/2] =?UTF-8?q?fix(ui):=20F8-09=20owner-feedback=20?=
 =?UTF-8?q?=E2=80=94=20fixed=20TOC=20trigger=20+=20heading=20offset=20(#52?=
 =?UTF-8?q?)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Owner-reported regressions in Firefox + Safari on desktop after the
initial F8-09 patch landed:

1. The TOC trigger rode up with the page during scroll instead of
   staying pinned to the viewport (mobile worked, desktop did not).
2. Clicking a popover item scrolled the matching section so its
   heading went up under the chrome — only the table body was visible.

Root cause for (1): the in-game shell declares `overflow-y: auto`
on `.active-view-host` so mobile (where `.game-shell` is fixed at
`inset: 0`) has an internal scroll region. On desktop the host
grows with content, no overflow ever engages, and the document
body becomes the actual scroll container. Per CSS spec the host
remains the "scrollport" for any `position: sticky` descendant, so
the trigger inside the report column never sees the scroll event
and rides up with the body content.

Fix:

- Swap the trigger from `position: sticky` to `position: fixed`.
  The component is mounted only while the report active view is on
  screen, so the fixed element is naturally tied to the view's
  lifetime. Anchor at `top: 4rem` (below the in-game header), and
  on `min-width: 1024px` shift `right` by 18 rem to clear the
  always-on sidebar; below 1024 px the sidebar is an overlay so
  the default `right: 1.25rem` matches the report's right padding.
- Add `padding-top: 4.5rem` to `.report-view` (4rem mobile) so the
  first section heading does not land under the trigger at scroll
  position 0.
- Add `scroll-margin-top: 7.5rem` to every `<section
  id="report-…">` so `scrollIntoView({ block: "start" })` lands
  the heading below the trigger after a popover-driven jump.
- Sync `ui/docs/report-view.md` §"Table of contents and active
  highlight" with the new positioning rationale.

Tests: `pnpm check`, `pnpm test` (821), `pnpm test:e2e
report-sections` (4 projects) all green.

Refs: #52 (#43 umbrella).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 ui/docs/report-view.md                        | 29 ++++++++++++--
 ui/frontend/src/lib/active-view/report.svelte | 21 ++++++++--
 .../lib/active-view/report/report-toc.svelte  | 40 +++++++++++++++++--
 3 files changed, 78 insertions(+), 12 deletions(-)

diff --git a/ui/docs/report-view.md b/ui/docs/report-view.md
index 6822ee7..a756157 100644
--- a/ui/docs/report-view.md
+++ b/ui/docs/report-view.md
@@ -85,8 +85,8 @@ the body — both surfaces stay in sync by construction.
 
 ## Table of contents and active highlight
 
-`report/report-toc.svelte` renders a single sticky icon-popup
-trigger in the top-right corner of the report column. The trigger
+`report/report-toc.svelte` renders a single icon-popup trigger
+pinned to the top-right corner of the report column. The trigger
 shows `≡` followed by the title of the currently-active section
 (CSS-clamped with `text-overflow: ellipsis` so a long RU title
 cannot bloat the button). Clicking opens an anchored popover
@@ -97,8 +97,29 @@ the matching `<section id="report-<slug>">` into view via
 `scrollIntoView` (with `prefers-reduced-motion` falling back to
 `behavior: "auto"`).
 
-On viewports below `768.98 px` the same surface re-styles into a
-fixed bottom-sheet anchored above the layout-owned bottom-tabs
+The trigger uses `position: fixed` instead of `position: sticky`.
+Per the CSS sticky spec a sticky element sticks within its nearest
+ancestor with non-`visible` overflow — and `.active-view-host`
+declares `overflow-y: auto` for the mobile scroll story. On
+desktop the host grows with content and the document body becomes
+the actual scroll container, so a sticky trigger inside the report
+column never receives a scroll event and rides up with the page
+content. A fixed trigger sidesteps the chain entirely; the
+component is mounted only while the report active view is on
+screen, so the fixed element is naturally tied to the view's
+lifetime. The desktop offset is `right: calc(18 rem + 1.25 rem)`
+to clear the always-on `lib/sidebar/sidebar.svelte`; below
+1024 px the sidebar collapses to an overlay drawer, so the
+default `right: 1.25 rem` matches the report's right padding. The
+report-view itself adds a top padding equal to the trigger's
+viewport offset plus its height so the first section's heading
+does not render under the trigger at scroll position 0, and every
+`<section id="report-…">` gets `scroll-margin-top: 7.5rem` so
+`scrollIntoView({ block: "start" })` lands the heading below the
+trigger after a popover-driven jump.
+
+On viewports below `768.98 px` the popover surface re-styles into
+a fixed bottom-sheet anchored above the layout-owned bottom-tabs
 bar (mirrors `lib/active-view/map-toggles.svelte`), so the same
 trigger and the same menuitem list serve desktop and mobile.
 
diff --git a/ui/frontend/src/lib/active-view/report.svelte b/ui/frontend/src/lib/active-view/report.svelte
index 11330a7..e0f0392 100644
--- a/ui/frontend/src/lib/active-view/report.svelte
+++ b/ui/frontend/src/lib/active-view/report.svelte
@@ -134,10 +134,14 @@ TOC and the body iterate the same data.
 </div>
 
 <style>
+	/*
+	`padding-top` clears the fixed TOC trigger that lives in the
+	viewport's top-right corner (`report/report-toc.svelte`,
+	`position: fixed; top: 4rem`). Without this padding the first
+	section (galaxy-summary) renders directly under the trigger.
+	*/
 	.report-view {
-		display: flex;
-		flex-direction: column;
-		padding: 1rem 1.25rem 2rem;
+		padding: 4.5rem 1.25rem 2rem;
 		font-family: system-ui, sans-serif;
 	}
 	.report-body {
@@ -146,9 +150,18 @@ TOC and the body iterate the same data.
 		flex-direction: column;
 		gap: 1.75rem;
 	}
+	/*
+	`scroll-margin-top` lets `scrollIntoView({ block: "start" })`
+	land the section *heading* in view (not behind the fixed
+	trigger or the sticky in-game header). Budget: ~3 rem header +
+	~3 rem trigger area + ~1.5 rem breathing room.
+	*/
+	.report-body :global(section[id^="report-"]) {
+		scroll-margin-top: 7.5rem;
+	}
 	@media (max-width: 767.98px) {
 		.report-view {
-			padding: 0.75rem;
+			padding: 4rem 0.75rem 0.75rem;
 		}
 	}
 </style>
diff --git a/ui/frontend/src/lib/active-view/report/report-toc.svelte b/ui/frontend/src/lib/active-view/report/report-toc.svelte
index e267cef..d147b64 100644
--- a/ui/frontend/src/lib/active-view/report/report-toc.svelte
+++ b/ui/frontend/src/lib/active-view/report/report-toc.svelte
@@ -143,14 +143,43 @@ in F8-09: that switch is available in the app-shell view menu.
 </div>
 
 <style>
+	/*
+	The trigger uses `position: fixed` rather than `position: sticky`
+	because on desktop the in-game shell's `.active-view-host`
+	declares `overflow-y: auto` while staying tall enough that no
+	overflow actually engages — the document body scrolls instead.
+	Per the CSS sticky spec the host is the "scrollport" for any
+	sticky descendant, so a sticky trigger inside the report column
+	never receives a scroll event and rides up with the page. Fixed
+	positioning anchors the trigger to the viewport directly; the
+	component is only mounted while the report active view is on
+	screen, so the fixed element is naturally tied to the view's
+	lifetime.
+
+	`top: 4rem` clears the sticky header (~3 rem). On ≥ 1024 px the
+	sidebar (`lib/sidebar/sidebar.svelte`) is always visible and
+	occupies the right 18 rem of the viewport, so the trigger has to
+	be pushed left by that much to stay inside the report column.
+	Below 1024 px the sidebar collapses into an overlay drawer,
+	so a viewport-right anchor of 1.25 rem matches the report's
+	right padding.
+
+	When the history banner is showing (historical turn view,
+	~2 rem extra) the trigger sits at the banner's lower edge —
+	acceptable for the rare historical-turn read path.
+	*/
 	.report-toc {
-		position: sticky;
-		top: 0.5rem;
-		align-self: flex-end;
-		margin-left: auto;
+		position: fixed;
+		top: 4rem;
+		right: 1.25rem;
 		z-index: 30;
 		font-family: system-ui, sans-serif;
 	}
+	@media (min-width: 1024px) {
+		.report-toc {
+			right: calc(18rem + 1.25rem);
+		}
+	}
 	.trigger {
 		display: inline-flex;
 		align-items: center;
@@ -221,6 +250,9 @@ in F8-09: that switch is available in the app-shell view menu.
 		border-left-color: var(--color-accent);
 	}
 	@media (max-width: 767.98px) {
+		.report-toc {
+			right: 0.75rem;
+		}
 		.surface {
 			position: fixed;
 			top: auto;
-- 
2.52.0