From 11ee1cc0ff379ce6e98139e4bb42834ad5b5e957 Mon Sep 17 00:00:00 2001
From: omer <omerdavidson@gmail.com>
Date: Sat, 5 Sep 2026 19:16:23 +0300
Subject: [PATCH] fix: confine code block horizontal scrolling to the code

`pre` was the scroll container, so a long line scrolled the whole code
block, taking the toolbar (language label and copy button) out of view
with it. Move `overflow-x: auto` down to the `code` element so only the
code scrolls.

Shiki's `tabindex="0"` moves along with it, otherwise the scrollable
region stops being reachable by keyboard.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018dS1J3EZzqhxBCc6wmh8Vj
---
 .changeset/code-block-scroll.md                       | 6 ++++++
 packages/core/src/utils/highlighter.mjs               | 5 +++++
 packages/node-legacy/src/legacy-html/assets/style.css | 4 +++-
 3 files changed, 14 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/code-block-scroll.md

diff --git a/.changeset/code-block-scroll.md b/.changeset/code-block-scroll.md
new file mode 100644
index 000000000..970acada8
--- /dev/null
+++ b/.changeset/code-block-scroll.md
@@ -0,0 +1,6 @@
+---
+'@doc-kit/core': patch
+'@node-core/doc-kit-legacy': patch
+---
+
+Confine horizontal scrolling in code blocks to the code itself, so the toolbar no longer scrolls out of view along with a long line.
diff --git a/packages/core/src/utils/highlighter.mjs b/packages/core/src/utils/highlighter.mjs
index 9e8fb6e20..4cb5706be 100644
--- a/packages/core/src/utils/highlighter.mjs
+++ b/packages/core/src/utils/highlighter.mjs
@@ -114,6 +114,11 @@ export default function rehypeShikiji() {
       // Adds the original language back to the <pre> element
       children[0].properties.class = `${children[0].properties.class} ${codeLanguage}`;
 
+      // The <code> element is the one that scrolls horizontally, so it is the
+      // one that has to be reachable by keyboard
+      delete children[0].properties.tabindex;
+      children[0].children[0].properties.tabindex = 0;
+
       // Adds the toolbar (language label + copy button) to the <pre> element
       children[0].children.push(createToolbarElement(languageId));
 
diff --git a/packages/node-legacy/src/legacy-html/assets/style.css b/packages/node-legacy/src/legacy-html/assets/style.css
index 9a80797b3..358bba774 100644
--- a/packages/node-legacy/src/legacy-html/assets/style.css
+++ b/packages/node-legacy/src/legacy-html/assets/style.css
@@ -544,11 +544,13 @@ pre {
   vertical-align: top;
   border-radius: 4px;
   margin: 1rem;
-  overflow-x: auto;
 }
 
+/* Only the code scrolls, so the toolbar stays put */
 pre > code {
+  display: block;
   padding: 0;
+  overflow-x: auto;
 }
 
 pre + h3 {