From 982f61cbca590594bfab93a4fe214731663da8a9 Mon Sep 17 00:00:00 2001 From: Danny van der Sluijs Date: Fri, 28 Aug 2026 12:59:28 +0200 Subject: [PATCH] fix: move the copy button clear of the code on narrow screens Carries forward the fix from PR #51, which addressed a reported bug on the Jekyll site where the copy button covered the code on small screens and slid away when swiping horizontally. The rewritten button already solved half of it by sitting on a wrapper around the code block rather than inside the element that scrolls, so it no longer moves with the content. But it kept the original top-right position, which is where it overlapped the first line. It now sits bottom right, the placement PR #51 settled on. That PR touches assets/copy-code.js, assets/index.css and the compiled dist/ stylesheet, all of which this migration deletes, so it cannot be merged afterwards and should be closed once this lands. Co-Authored-By: Claude Opus 5 --- _media/copy-code.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/_media/copy-code.js b/_media/copy-code.js index f56a979..8232d87 100644 --- a/_media/copy-code.js +++ b/_media/copy-code.js @@ -10,6 +10,12 @@ * since `.highlight` was Rouge markup that Torchlight does not produce. * - It injects its own styles, so the project does not need a stylesheet or a * build step to bring back one button. + * + * The button is anchored to a wrapper around the code block rather than inside + * it, and sits bottom right. Both matter: the original sat inside the element + * that scrolls horizontally, so on narrow screens it covered the code and slid + * away when you swiped. That was reported as an issue against the Jekyll site + * and fixed the same way in PR #51, which this carries forward. */ (function () { 'use strict'; @@ -20,7 +26,7 @@ var styles = [ '.code-copy-wrapper { position: relative; }', '.code-copy-button {', - ' position: absolute; top: .5rem; right: .5rem;', + ' position: absolute; bottom: .5rem; right: .5rem;', ' display: inline-flex; align-items: center; justify-content: center;', ' width: 2rem; height: 2rem; padding: .25rem;', ' cursor: pointer; box-sizing: border-box;',