[reakaleek]

API example code now scrolls sideways under the same scrollbar as Markdown code blocks, and its line numbers and "Generated from the API spec" note stay in place while it scrolls.

Affects: API reference, Site UI

Prompt summary: Jan reports that the API example code blocks have no horizontal scrollbar, while Markdown code blocks have one. The ask is to make long lines as easy to reach as in a Markdown code block, without engineering more than that.

Why

The response and code-sample bodies set their own scrollbar thumb, --code-border (#373e47) on the #22272e code surface, which is close to invisible. Their ::-webkit-scrollbar rules never applied in Chrome, because the site sets scrollbar-width on every element. Once a long line scrolls, the line-number gutter scrolls out of view with the code, and so does the generated-sample note in a response. #4696 already stopped the request strip and the response from cutting off their scrollbars.

What

The site's scrollbar

The API code bodies drop their own scrollbar rules and take the site-wide thin bar that Markdown code blocks use, with the same thumb colour. With a mouse or "always show scrollbars", the bar is always visible. With a trackpad on macOS it appears while scrolling, as it does in Markdown code blocks.

Line numbers and notes that stay put

The line-number gutter is position: sticky with an opaque fill, and .code-lines is as wide as its longest line, so the gutter stays at the left all the way across. The space after the numbers moved into the gutter, so the gap stays the same while the code scrolls under it.

The "Generated from the API spec" note in a response stays at the bottom right of the visible code too. It was sticky already, but its parent .example-media-body was only as wide as the visible code, and a sticky box cannot leave its parent. The media body now spans the full code width, and its non-code children (the note, a caption, a media header) size to the response panel, which is exactly the visible width.

In the full-screen preview the code is now at least 100 characters wide (min-width) rather than exactly 100 (width). A fixed width ended .code-lines at 100 characters, so the line numbers slid away on a longer line. Samples of 100 characters or fewer open the same dialog as before, and a longer line widens the dialog up to the window before it scrolls.

A browser test for it

ApiExampleScrollingTests in the journeys project opens a Cloud Connect operation in headless Chrome, scrolls the request and the response sideways with a wheel event, and checks that the code scrolled, the language stayed, and the line numbers and the note stayed in place. The jsdom carousel tests cannot see real layout, and a .journey file cannot compare positions. The tests run in their own api-examples shard. Closes #4847.

Out of scope: Components/Pages/ApiReference/api-reference.css and api-code.css, the design-system port that loads only with NAVIGATION_PREVIEW, keep their old rules. ArrowLeft and ArrowRight inside a card still switch the example language instead of scrolling the code.

Verify

mise run site:test
mise run journeys:test   # ApiExampleScrollingTests
mise run serve

Open /api/doc/cloud-connect/operation/operation-patchcluster and scroll the request and the 200 response sideways. The bar looks like the one on /syntax/code, the line numbers stay at the left, and the note stays at the bottom right.

Check on the preview

• Cloud Connect: Update a Cloud Connected cluster — scroll the request and the response sideways: same scrollbar as Markdown code blocks, line numbers and note stay put.
• Elasticsearch: Post a behavioral analytics event — a long request line: the line numbers stay at the left while it scrolls.
• Code blocks — control page: Markdown code fences share code-block.css but have no line-number gutter, so they look unchanged.

🤖 Generated with Claude Code

[github-actions]

Docs preview (local build)

Handbook preview: https://docs-v3-preview.elastic.dev/elastic/docs-builder/pull/4843/

[infra-vault-gh-plugin-prod]

Severity: P2 (Medium)

This revision drops all scrollbar styling for the API code bodies, including the reset of scrollbar-width/scrollbar-color to auto and the 14px ::-webkit-scrollbar slot. The cards now just use the global * { scrollbar-width: thin; … } from styles.css. That is the setup the PR description names as the cause of the bug: on macOS the cards still get an overlay bar that only appears while scrolling, so a mouse user still has nothing to drag. The PR title and description ('A scrollbar you can grab', '14px slot that is always reserved', Firefox @supports fallback) still promise this, but the code no longer does it. Either restore the scrollbar rules or update the title and description so they don't claim this fix.

_{Generated by Libra. Specialist: libra-complexity. React with 👍 or 👎 to give feedback on this comment.}

[infra-vault-gh-plugin-prod]

Severity: P3 (Low)

Replacing the scrollbar drag with a horizontal wheel event removes regression coverage for the interaction this PR is meant to fix. A wheel event can scroll an overflow container even when no scrollbar is visible or draggable, so these tests can pass with the scrollbar styling entirely absent. Retain a real scrollbar-drag assertion, using a browser configuration that renders scrollbars, alongside the sticky-position checks.

_{Generated by Libra. React with 👍 or 👎 to give feedback on this comment.}