Give scroll regions inside the page the design system's scrollbar #208

Merged

cruelacid merged 2 commits from worktree-nec-150-scrollbars into main 2026-09-29 09:49:47 +01:00

Conversation 0 Commits 2 Files changed 8 +82 -6

cruelacid commented 2026-09-29 09:40:06 +01:00

Owner

Copy link

Task: NEC-150

The docs sidebar, code blocks and wide tables on nectenda.com showed the operating system's scrollbar in the middle of a styled page. The Nectenda Design System now defines an in-page scrollbar — --scrollbar-* tokens, the .nx-scroll utility and guidelines/scrollbars.html — and the site applies it to every inner scroll region. The page's own scrollbar stays the browser's.

• 6px thumb in a 10px gutter, --radius-sm, no track; thumb ≥3:1 on page, surface and raised in both themes (--border-strong was 1.5–2:1)
• two engines: WebKit pseudo-elements under @supports, standard scrollbar-color for Firefox
• site/docs.test.mjs fails if a guide page has a pre, table or sidebar without .nx-scroll (mutation-checked)
• sync-design-assets.mjs regenerated the identity copy and the plugin token block (tokens only, nothing in the plugin uses them yet)

Previewed locally on the docs and pricing pages before this PR.

Changelog

NONE

🤖 Generated with Claude Code

https://claude.ai/code/session_01NnpsVLx9NmMG2N2nJnA8mR

Task: NEC-150 The docs sidebar, code blocks and wide tables on nectenda.com showed the operating system's scrollbar in the middle of a styled page. The Nectenda Design System now defines an in-page scrollbar — `--scrollbar-*` tokens, the `.nx-scroll` utility and `guidelines/scrollbars.html` — and the site applies it to every inner scroll region. The page's own scrollbar stays the browser's. - 6px thumb in a 10px gutter, `--radius-sm`, no track; thumb ≥3:1 on page, surface and raised in both themes (`--border-strong` was 1.5–2:1) - two engines: WebKit pseudo-elements under `@supports`, standard `scrollbar-color` for Firefox - `site/docs.test.mjs` fails if a guide page has a `pre`, `table` or sidebar without `.nx-scroll` (mutation-checked) - `sync-design-assets.mjs` regenerated the identity copy and the plugin token block (tokens only, nothing in the plugin uses them yet) Previewed locally on the docs and pricing pages before this PR. ## Changelog NONE 🤖 Generated with [Claude Code](https://claude.com/claude-code) https://claude.ai/code/session_01NnpsVLx9NmMG2N2nJnA8mR

cruelacid added the

area:docs

label 2026-09-29 09:40:06 +01:00

cruelacid added 1 commit 2026-09-29 09:40:06 +01:00

Give scroll regions inside the page the design system's scrollbar ... f09db62f13

The docs sidebar, code blocks and wide tables showed the operating system's
scrollbar in the middle of a styled page. The design system now defines one
(--scrollbar-* tokens, .nx-scroll, guidelines/scrollbars.html): a 6px thumb
in a 10px gutter, no track, 3:1 or better on every surface in both themes.
The page's own scrollbar stays the browser's.

The site renderers add .nx-scroll to every pre and table they emit, and to
the sidebar and pricing table; a test fails if one is missed.

Task: NEC-150

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NnpsVLx9NmMG2N2nJnA8mR

cruelacid added 1 commit 2026-09-29 09:43:23 +01:00

Regenerate the status page stylesheet from the new tokens ... b68e4f26cb

It is built from site/static/tokens.css, and a test holds the committed
copy to what the build produces.

Task: NEC-150

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NnpsVLx9NmMG2N2nJnA8mR

cruelacid merged commit b68e4f26cb into main 2026-09-29 09:49:47 +01:00

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels   

area:docs

docs/

  

area:identity

packages/identity

  

area:ops

deploy/, CI, hosting

  

area:plugin

packages/plugin

  

area:server

packages/server

  

channel:community

Obsidian forum, Obsidian Discord, Reddit

  

channel:direct

Cold outreach to named firms

  

channel:owned

nectenda.com pages, the feedback board

  

channel:press

Hacker News, newsletters, outlets, YouTube creators

  

channel:social

Bluesky, Mastodon, X, YouTube accounts

  

e2ee-constrained

End-to-end encryption changes the shape of the answer

  

gate:at-ga

Held until Gates A-C close and terms/privacy leave DRAFT

  

gate:pre-ga

Safe to do before the launch gates close

  

marketing

Reach and positioning; work published off nectenda.com

  

parity

Relay feature-parity programme

  

relay:absent

4 - Not supported, not requested, not planned at Relay

  

relay:planned

2 - On Relay's roadmap (Active/Planned) or has an open PR

  

relay:requested

3 - Asked for by Relay users or under 'Considering'; not committed

  

relay:supported

1 - Relay ships this today

  

risk:additive

New message type, table or column; backward compatible

  

risk:contract

Changes something existing accounts or stored data depend on

  

risk:none

Client-only; the server is untouched

  

usability

How the product is understood and learned, not what it does

No labels

area:docs

area:identity

area:ops

area:plugin

area:server

channel:community

channel:direct

channel:owned

channel:press

channel:social

e2ee-constrained

gate:at-ga

gate:pre-ga

marketing

parity

relay:absent

relay:planned

relay:requested

relay:supported

risk:additive

risk:contract

risk:none

usability

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

1 participant

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set

Reference

Nectenda/nectenda!208

No description provided.