Skip to content

fix(dev): collapse the docs rail, drop its scrollbar, highlight code - #44

Merged
vreshch merged 1 commit into
masterfrom
fix/docs-nav-scroll-highlight
Aug 7, 2026
Merged

fix(dev): collapse the docs rail, drop its scrollbar, highlight code#44
vreshch merged 1 commit into
masterfrom
fix/docs-nav-scroll-highlight

Conversation

@vreshch

@vreshch vreshch commented Aug 7, 2026

Copy link
Copy Markdown
Member

Three UX complaints on the deployed docs site (ds.agentage.io). dev/ + e2e/ only — no src/components changes.

1. Double scrollbar on the left

The rail nested two scroll containers: the shell <aside> (overflow-y-auto) around DocSidebar's own sticky max-h-screen overflow-y-auto inner div. Both painted a bar from the global ::-webkit-scrollbar styling in base.css, right next to the page bar.

  • The inner scroller is flattened (scoped to .docs-rail, so the DocSidebar demo keeps its own).
  • The rail gets scrollbar-width: thin + a transparent thumb that only appears on hover/focus-within, with matching ::-webkit-scrollbar overrides since Chromium prefers the pseudo-elements once they exist.

2. Left navigation is not collapsed

DocsNav (new, dev/components/docs-nav.tsx) dogfoods the DS Collapsible compound API:

  • One group per category, collapsed by default, chevron indicator, aria-expanded/aria-controls for free.
  • The group holding the current route auto-expands - on deep links too - and the active item is scrolled into the rail (rail scrollTop only, never the page).
  • Open groups persist for the session in sessionStorage.

With groups collapsed the rail fits the viewport, which is what mostly removes complaint 1; the thin-scrollbar fix covers the long-group case.

3. Code is not highlighted

highlight.js as a devDependency (dev/ is not published - the library's dependencies are untouched), four languages registered, fed through the DS CodeBlock children slot so the chrome stays DS. All import snippets, the getting-started and theming snippets, and the CodeBlock demo are highlighted.

The theme maps hljs classes to semantic tokens only. Every one clears 4.5:1 on --color-card in both themes (dark / light): muted-foreground 4.66 / 4.76, primary-emphasis 9.32 / 5.45, success 8.41 / 5.43, warning 6.82 / 5.43, info 5.21 / 5.47, destructive 4.91 / 5.67.

Verification

  • npm run verify green (434 unit tests).
  • Playwright green in mcr.microsoft.com/playwright:v1.62.1-noble, 43/43 - the axe WCAG A/AA sweep passes over all 8 categories, every component page and /, /install, /theming in both themes with the new highlight colours.
  • New specs: deep-link expands only the route's group, keyboard toggle + session persistence, "the rail is the only scroller in the aside", and highlighting in both themes.
  • Baselines regenerated in the container: component-page and category-index only (the two full-page shots that include the rail).
  • Browser (:5182): exactly one visible scrollbar when several categories are open and none when the rail fits, groups collapse/expand, active item auto-scrolled on a cold deep link, code visibly multi-coloured in dark and light, no console errors.

The docs site shipped a fully-expanded rail nested inside two scroll
containers and rendered every snippet as plain text.

- Groups are Collapsible, collapsed by default; the current route's group
  auto-expands, scrolls itself into view and persists in sessionStorage.
- The rail is the only scroller in the aside and paints a transparent thumb,
  so the page bar is the only visible one.
- highlight.js (dev-only) feeds the DS CodeBlock `children` slot; the theme
  maps to semantic tokens that clear 4.5:1 on bg-card in both themes.
@vreshch
vreshch marked this pull request as ready for review August 7, 2026 00:32
@vreshch
vreshch merged commit 0a6d88e into master Aug 7, 2026
2 checks passed
@vreshch
vreshch deleted the fix/docs-nav-scroll-highlight branch August 7, 2026 00:32
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant