Ilia Denisov
1b2c13ecd6
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 client — topic docs
Deeper, topic-based documentation for the Galaxy web/cross-platform UI
client, beyond what fits in ../README.md. Each file
describes how one area works (current state); the staged build history
lives in ../PLAN.md, the active web finalization in
../PLAN-finalize.md, and deferred work in
../ROADMAP.md.
Foundation & platform
- design-system.md — the design tokens (colour / spacing / typography), the light/dark theming mechanism, and the component migration conventions.
- a11y.md — the WCAG 2.2 AA approach: axe + keyboard test gates, the shared a11y primitives, coverage by area, and the map-canvas alternative.
- error-state-ux.md — the central error surface
(taxonomy → translated/actionable messages), the shared
ViewStateplaceholder, the selected-planet ring, and bottom-sheet dismissal. - navigation.md — routes, the sidebar tabs, and the state-preservation rules across view/tab switches.
- storage.md — the
KeyStoreandCacheabstractions and their web (IndexedDB) implementations. - game-state.md — decoding the FlatBuffers report into
GameReportand theGameState/ rendered-report stores. - sync-protocol.md — order-draft sync, turn cutoff, conflict handling, and auto-pause.
- events.md — the signed push channel and event handling.
- calc-bridge.md — the
pkg/calc→ WASM → TypeScript bridge, with the live function surface and parity rules. - wasm-toolchain.md — building
ui/coretocore.wasmwith TinyGo. - pwa-strategy.md — the installable/offline PWA: the native service worker, manifest, icons, and the Playwright PWA gate.
- testing.md — the UI test layers (Vitest + Playwright).
Auth & lobby
- auth-flow.md — device keypair, email-code login, and request signing on the client.
- lobby.md — the lobby/game-list UI and membership flows.
Map & active views
- renderer.md — the PixiJS map renderer contract (world model, hit-test, torus / no-wrap).
- order-composer.md — the order tab and the optimistic order overlay.
- report-view.md — the Reports view.
Tools & inspectors
- calculator-ux.md — the ship-class calculator (design + goal-seek + planet build + reach circles + modernization).
- science-designer-ux.md — the science designer.
- ship-group-actions.md — ship-group inspector actions (move, send, upgrade, …).
- cargo-routes-ux.md — cargo-route composition and reach filtering.
Combat & comms
- battle-viewer-ux.md — the battle viewer.
- diplomail-ui.md — the diplomatic-mail view.
Localisation
- i18n.md — the localisation mechanism and translation bundles.