Repository navigation
Conversation
Since the code-copy scaffold moved the copy button out of the pre, the rule that shifted it clear of the annotation gutter no longer matches, so the button sits on top of the marker and swallows its hover. The test checks that the marker is the element under its own center and that the annotation tooltip opens. It fails in chromium, firefox and webkit until the CSS is fixed. Refs #13444
Since the copy button moved out of the pre into the outer scaffold, the rule that shifted it left of the annotation gutter matched nothing, so the button sat on top of the marker of an annotated first line and swallowed its hover or click. The scaffold stays: it keeps the button from scrolling with the code while line numbers need visible overflow. The rule now targets the button through the scaffold that holds an annotated pre. Its margin can no longer be 1.25em: that relied on the button inheriting the code font size, and as a sibling of div.sourceCode its em is now the body size. The margin is the gutter width, calc(20px + 0.5em) in code font size, rewritten as 0.5 times $code-block-font-size so it holds when a theme changes that size, plus the default 5px. The button and the pre resolve em from the same parent, so the two stay in step. The test now also covers select mode, a theme with a 0.75em code block font size, and checks that the button of a block without annotations keeps its default position. Fixes #13444
The fix is not backported to v1.10, and on main the Regression fixes section marks entries that are.
The margin multiplied $code-block-font-size inside calc(), which only matches the gutter for length units. A percentage, which a theme or a brand typography size can set, resolved against the scaffold width in a margin, and pushed the button about 290px into the code. The button now takes the code block font size itself, so it shares the pre's em, and the margin repeats the gutter's own calc(20px + 0.5em) plus 5px. That holds for any value the pre accepts. The copy icon is sized in rem, so it keeps its size.
Collaborator
✅ Snyk checks have passed. No issues have been found so far.
💻 Catch issues earlier using the plugins for VS Code, JetBrains IDEs, Visual Studio, and Eclipse. |
3 of 5 tasks
cderv
added this pull request to stack #15142
October 22, 2026 09:10
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Since #13024 wrapped the code copy button in
div.code-copy-outer-scaffold(first released in v1.8.15), the button no longer sits inside thepre.The rule that moved it clear of the annotation gutter,
.code-annotated .code-copy-button, still targets a descendant ofpre.code-annotated, so it matches nothing.On an annotated block the button lands on top of the marker on the first line, and the annotation can no longer be opened by hover or click.
Fix
The selector now follows the scaffold:
.code-copy-outer-scaffold:has(pre.code-annotated) > .code-copy-button.The scaffold itself stays, as it is what keeps the button from scrolling with the code and lets line numbers work (#13009, #5538).
The rule is based on the one suggested in the issue thread.
The old
1.25emmargin worked in 1.7 because the button sat inside thepreand inherited the code font size.The button now has the body font size, while the gutter is
calc(20px + 0.5em)in the code font size.The rule therefore sets
font-size: $code-block-font-sizeon the button, somargin-right: calc(20px + 0.5em + 5px)is the gutter width plus the button's usual 5px for any theme font size.It is written with
emrather than0.5 * $code-block-font-size, because a percentage value such as75%would resolve against the container width insidemarginand push the button far into the code.Annotated blocks inside callouts are still wrong, which is separate and tracked in #13446.
No backport is planned: the regression is from v1.8.15 and the stable release is v1.10.
Fixes #13444
Checklist
I have (if applicable):
AI-assisted PR
Note: autonomous AI agents submitting PRs without human oversight are not permitted — see the Code of Conduct.