Repository navigation
Fix code copy button and spacing for code blocks at callout edges - #15138
Merged
Merged
Conversation
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. |
cderv
added this pull request to stack #15142
October 22, 2026 09:10
Since code blocks are wrapped in .code-copy-outer-scaffold, the callout first/last-child rules hit the scaffold instead of div.sourceCode. The padding-top added to a first child stopped the code block's own 1em margin from collapsing, and the absolutely positioned copy button anchors to the scaffold's padding box, so in a default-style callout starting with code the button sat about 19px above the code, half outside it. The last-child rules, which meant to exempt code blocks with :not(.sourceCode), padded the scaffold too, leaving an extra gap below code at the end of a callout. The `> div > :last-child` branch also matched the button itself, the scaffold's last child, and gave it 8.5px of bottom padding. At a callout edge, the scaffold is now spaced with margin instead of padding and the inner div.sourceCode margin is dropped, for bare code blocks and for cells whose code is at that edge. The button sits 5px inside the code top, as it does outside callouts, and code at the top or bottom of a callout gets the same gap as a paragraph there. This is a visible change from 1.7, where the code frame of a titled callout sat flush against the header. The general padding-to-margin change asked for in #13238 touches non-code first children too and is left out. Fixes #13446
Each block now reads as code at the first or last edge of a callout body, with the long shared selector prefix written once. The compiled CSS is byte-identical to the flat form.
With the copy button back inside the code frame, an annotated first line in a callout puts the button over the annotation marker, the same overlap #13444 fixes outside callouts. A hit test on the marker covers the callout case. It fails without the annotated button rule and passes with it. That rule also drops the annotated button's top margin, so its position is now compared with an annotated block outside a callout instead of a plain one.
cderv
force-pushed
the
fix/issue-13446
branch
from
October 22, 2026 14:08
ebbad33 to
c74ef0c
Compare
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 code blocks in
div.code-copy-outer-scaffold(first released in v1.8.15), a code block that starts or ends a callout has its copy button above the code frame, half outside it, and gets much more space than a paragraph at the same edge.Stacked on #15136 (#13444), which it needs for annotated code blocks in callouts. It should be merged after it.
Root cause
The callout edge rules in
_bootstrap-rules.scsswere written fordiv.sourceCode, but the edge child is now the scaffold, or a.cellaround it.0.5rempadding of.callout-body > :first-childand:last-childlands on the scaffold. It stops the1emmargin ofdiv.sourceCodefrom collapsing, so the code moves down while the button stays attop: 0of the scaffold.:last-child:not(.sourceCode)was meant to exempt code blocks, but the scaffold is not.sourceCode.> div > :last-childbranch now matches the copy button itself, which gets an extrapadding-bottom.Fix
At a callout edge, the scaffold (or a cell whose edge child is the scaffold) gets the spacing as margin instead of padding, and
div.sourceCodedrops its own margin there. The button is back 5px inside the code frame, and code at the edge gets the same spacing as a paragraph in the same callout. The copy button is excluded from the> div > :last-childrule. The rules are based on the CSS suggested in the issue thread.The cell rules use
:has()to only apply when code is at the edge of the cell, so a cell ending with its output keeps its current spacing.This is a visible change compared to 1.7, where the callout padding applied to
div.sourceCodeitself, so the code frame was flush to the callout header (#13238). #13238 also asks to change padding to margin for other first children of a callout, which changes more than code blocks, so it is not part of this PR.Moving the margin onto the scaffold for every code block was considered, as the same offset happens in sections using the column grid (#15137). That rule adds 17px of space in tabsets and between a filename header and its code, as these contexts reset the margin on
div.sourceCode, and the callout edge rules would still be needed. The grid case is tracked separately in #15137.No backport is planned: the regression is from v1.8.15 and the stable release is v1.10.
Fixes #13446
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.