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 {