fix(web): sticky nav on pear/reflex, anchor clearance, docs focus rings

Merged
WI
5d ago
+11-23

Three CSS fixes from a pass against good-css.com.

Sticky nav on /pear and /reflex. The page wrappers clip horizontal overflow with overflow-x: clip. clip does not create a scroll container, so the sticky SiteNav stays pinned to the viewport. At scrollY 1500 the nav sits at top: 12px. With overflow-x: hidden it scrolls off the page (top: -1488px).

Anchor clearance. html defines --nav-clearance: 88px and sets scroll-padding-block-start: calc(var(--nav-clearance) + 16px). Hash links and scrollIntoView now land below the sticky nav on every page. The docs sidebar rail uses the same token for top and height. Per-page scroll-margin-top values (agents, primitives, teams, blog, onboarding) are removed, because they would stack on top of the root padding. On /docs/introduction#ways-to-connect, the heading lands at 104px and the nav's bottom edge is at 78px.

Focus rings. The docs version and TOC selects and the onboarding step headings use the global :focus-visible ring (3px --focus-ring, 2px offset). They previously used outline: none with a 1px box-shadow at 18% opacity, or no indicator at all. Checked by tabbing onto the TOC select at a 1400px viewport.

The docs search input keeps outline: none. It is the only control in its modal, the caret marks focus, and the modal's overflow: hidden would clip a ring.

npm --workspace web run build and run test both pass (387 passed, 1 skipped).

🤖 Generated with Claude Code

[!NOTE]
Low Risk
CSS-only layout, scroll-offset, and focus styling with no auth, data, or API changes.

Overview
Fixes sticky site nav, in-page anchor scrolling, and keyboard focus across marketing and docs surfaces via centralized CSS.

On /pear and /reflex, page wrappers now use overflow-x: clip instead of hidden so horizontal clipping no longer creates a scroll container that unpins the sticky SiteNav.

html defines --nav-clearance: 88px and scroll-padding-block-start so hash links and scrollIntoView clear the nav site-wide; the docs left rail’s sticky top/height use the same token. Per-section scroll-margin-top on agents, primitives, teams, blog headings, and onboarding is removed so offsets don’t stack with the root padding.

Docs TOC/version selects and onboarding step headings drop custom outline: none / faint box-shadow focus styles so they inherit the global :focus-visible ring.

Reviewed by Cursor Bugbot for commit 13c4d81ead0c2388315492593f8322c6d00c5c30. Bugbot is set up for automated code reviews on this repo. Configure here.

Summary by cubic

Fixes sticky nav on /pear and /reflex, anchor clearance below the nav, and a few focus indicators.

  • Switches page wrappers from overflow-x: hidden to overflow-x: clip so the sticky SiteNav stays pinned instead of scrolling off with the page.
  • Defines --nav-clearance and scroll-padding-block-start on html so hash links and scrollIntoView land below the nav site-wide; the docs sidebar rail uses the same token. Removes per-page scroll-margin-top values that would stack with the root padding.
  • Docs version and TOC selects and onboarding step headings now use the global :focus-visible ring instead of custom 1px box-shadows. The docs search input intentionally keeps outline: none since it's the only control in its modal.

Agent Relay sessions

  • claude session 335ed426 · opened via gh pr create · last active 2026-10-07