[EMRahman]

Why

• The header menu differed from page to page. The Setup Guide page showed only four items, for example.
• Menu shortcuts didn't land at the top of their sections, especially on phones.

What changed

• One shared menu. The home page, Setup Guide, Support and Try It pages now share one header menu: Scoring, Stats, AI Coach, Share, Try it, Setup Guide, Privacy, FAQ, Support. They also share one footer. On pages other than the home page, the home-page items link to index.html#…. The current page is marked with aria-current.
• "Setup guide" → "Setup Guide" in the menu labels.
• Scroll offset. site.css gives link targets a scroll margin so jumps stop below the 66px sticky header. Home-page sections already have top padding, so they only need a 24px margin at phone width. Unpadded targets, such as the Support cards, get the full 86px.
• Screenshot sizes. The width/height of five index.html screenshots (07, 08 and 10–12) now match the real files. Before, the page shrank by about 200px as those images loaded. That made cross-page jumps such as Setup Guide → FAQ overshoot their section.
• Support page header. Its ← Home button is hidden below 1080px wide, so the longer menu doesn't overflow between 940 and 1060px. The logo still links home.
• Support page menu. The header no longer links to Support's own "Getting started" and "Troubleshooting" sections. Both still work as direct links, and the cards are at the top of the page.
• Privacy page: unchanged. It has its own simple layout with no menu.

Verification

• Tool: a headless Chromium (Playwright) run against a local server, at 390px and 1280px wide.
• Home-page menu: every link now puts its section heading clear of the header. Before, the section labels sat under the header on phones.
• Cross-page links: links from the Setup Guide, Try It and Support pages to home-page sections land correctly.
• Support page: its section links no longer hide headings under the header.
• Header overflow: none on any page at widths from 941 to 1180px.
• Phone menu: a screenshot of the open menu on the Setup Guide page shows all nine items.

🤖 Generated with Claude Code

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 1e21a65689

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Make the expanded mobile menu scrollable

On short mobile viewports, such as a phone in landscape at the max-width: 940px breakpoint, expanding this menu to nine rows makes the dropdown roughly 475px tall below the 66px sticky header. Since .nav.open .nav-links has neither a viewport-relative maximum height nor vertical scrolling, the final entries remain below the viewport even while the page scrolls. This also affects the newly expanded menus in try.html and support.html; constrain the dropdown to the available viewport height and enable vertical overflow.

Useful? React with 👍 / 👎.

[EMRahman]

Fixed in 17f58f7. The open menu is now capped at the height below the header (100dvh - 66px, with a 100vh fallback) and scrolls with overflow-y: auto. overscroll-behavior: contain stops the scroll from carrying over to the page. Checked in headless Chromium: at 844×390 the menu is 323px tall with 459px of content, and the last item (Support) scrolls into view. At 390×844 the menu shows in full, as before.