The global header was mounting a full navigation for every breakpoint, always painting signed-out chrome on marketing pages, and covering Use cases and Learn at 430px. Keyboard users hit dozens of invisible tab stops before any real content, and signed-in people saw Log in on first paint.
This unifies marketing with the same session-aware header as the rest of the app, keeps a single set of controls in the DOM, and adds a skip-to-content link to the existing main landmark.
Changes
Top now renders one menu, one Log in / Profile control, and one Create rule button, with sizes via responsive classes instead of cloned breakpoint slots
Standard header is a three-column grid so the logo cannot overlay the nav; the wordmark stays off until 640px so 430px links stay clickable
Home yellow-tab header keeps logo + nav in the tab and actions outside, still as a single DOM set
Marketing uses ConditionalNavigation (cookie on the server) instead of a client-only signed-out MarketingNavigation
Skip-to-content is first in the shell and targets #main-content on each group <main>
Tab from the address bar: first stop is Skip to content; Enter should land in main. Header after that should be logo, Use cases, Learn, About, Log in or Profile, Create rule — not 20+ invisible stops
At 430px (signed in if you can): Use cases and Learn must be fully visible and clickable; the logo must not sit on top of them
Signed in, hard-refresh a marketing page: first HTML should show Profile, not a Log in flash
Confirm /create/* and /login still hide the global header, and skip-to-content still works on those routes
Notes
Skip link is parked above the viewport until focused (transform), so a mouse click on its layout box is not the test — use Tab
Home header at 430px is icon-only in the yellow tab; the wordmark returns from 640px
## Overview
The global header was mounting a full navigation for every breakpoint, always painting signed-out chrome on marketing pages, and covering Use cases and Learn at 430px. Keyboard users hit dozens of invisible tab stops before any real content, and signed-in people saw Log in on first paint.
This unifies marketing with the same session-aware header as the rest of the app, keeps a single set of controls in the DOM, and adds a skip-to-content link to the existing main landmark.
## Changes
- `Top` now renders one menu, one Log in / Profile control, and one Create rule button, with sizes via responsive classes instead of cloned breakpoint slots
- Standard header is a three-column grid so the logo cannot overlay the nav; the wordmark stays off until 640px so 430px links stay clickable
- Home yellow-tab header keeps logo + nav in the tab and actions outside, still as a single DOM set
- Marketing uses `ConditionalNavigation` (cookie on the server) instead of a client-only signed-out `MarketingNavigation`
- Skip-to-content is first in the shell and targets `#main-content` on each group `<main>`
- Copy: `messages/en/components/header.json` (`skipToContent`)
## How to Test
1. `npm run dev`, open `/`, `/learn`, and `/about`
2. Tab from the address bar: first stop is Skip to content; Enter should land in main. Header after that should be logo, Use cases, Learn, About, Log in or Profile, Create rule — not 20+ invisible stops
3. At 430px (signed in if you can): Use cases and Learn must be fully visible and clickable; the logo must not sit on top of them
4. Signed in, hard-refresh a marketing page: first HTML should show Profile, not a Log in flash
5. Confirm `/create/*` and `/login` still hide the global header, and skip-to-content still works on those routes
## Notes
- Skip link is parked above the viewport until focused (`transform`), so a mouse click on its layout box is not the test — use Tab
- Home header at 430px is icon-only in the yellow tab; the wordmark returns from 640px
Breakpoint clones were still in the tab order, marketing always painted Log in, and at 430px the logo overlay covered Use cases and Learn.
Co-authored-by: Cursor <cursoragent@cursor.com>
an.di
self-assigned this 2026-09-09 23:23:40 +00:00
an.di
merged commit 2d351987cf into main2026-09-09 23:23:49 +00:00
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
Overview
The global header was mounting a full navigation for every breakpoint, always painting signed-out chrome on marketing pages, and covering Use cases and Learn at 430px. Keyboard users hit dozens of invisible tab stops before any real content, and signed-in people saw Log in on first paint.
This unifies marketing with the same session-aware header as the rest of the app, keeps a single set of controls in the DOM, and adds a skip-to-content link to the existing main landmark.
Changes
Topnow renders one menu, one Log in / Profile control, and one Create rule button, with sizes via responsive classes instead of cloned breakpoint slotsConditionalNavigation(cookie on the server) instead of a client-only signed-outMarketingNavigation#main-contenton each group<main>messages/en/components/header.json(skipToContent)How to Test
npm run dev, open/,/learn, and/about/create/*and/loginstill hide the global header, and skip-to-content still works on those routesNotes
transform), so a mouse click on its layout box is not the test — use Tab