Repository navigation
Fix revealjs callout spacing below a final code block - #15031
Merged
Merged
Conversation
Since 1.8.15 the HTML postprocessor wraps code blocks in div.code-copy-outer-scaffold for the copy button, and revealjs uses it. The last child of .callout-content is then the scaffold, not div.sourceCode, so the two last-child rules written for a code block in last position stopped matching: - titled callouts: the scaffold was not excluded from the paragraph rule, so it got 0.5rem padding and no margin instead of the block margin (8px instead of 12px below the code); - simple untitled callouts: the 1rem margin rule never matched, so the code block border touched the callout border. Both selectors now also match the scaffold. The margin goes on the scaffold itself: it has no padding or border, so this reproduces the 1.7.34 layout exactly. The :not() selector list keeps the rule's specificity unchanged. The plain div.sourceCode selectors stay for code-copy: false, where there is no scaffold. The Playwright test measures the gap below the last block, normalized by Reveal.getScale() and the callout border, for three callouts ending with code and two ending with a paragraph as controls. Fixes #15014
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. |
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
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.
When a code block is the last element of a callout in Revealjs, it sits against the bottom of the callout since 1.8.15. With
appearance="simple"and no title, the code block border touches the callout border.Root cause
Since #13024, code blocks are wrapped in a
div.code-copy-outer-scaffoldfor the copy button, and Revealjs uses the same HTML postprocessor. Two rules added in #11251 for a code block in last position selectdiv.sourceCodeas the last child of.callout-content, so they no longer match:padding-bottom: 0.5remand no margin, except adiv.sourceCode. The scaffold is not excluded, so it gets the 8px padding instead of the 12px block margin.div.sourceCodegetsmargin-bottom: 1rem. This rule never matches now.Fix
Both selectors now also match
div.code-copy-outer-scaffold. The margin is set on the scaffold itself. It has no padding or border, so the spacing is the same as in 1.7.34 (12px in titled callouts, 16px in simple untitled ones). The:not()uses a selector list, so the specificity of the titled rule doesn't change. Thediv.sourceCodeselectors are kept forcode-copy: false, where there is no scaffold.The new Playwright test measures the space below the last block of the callout, divided by
Reveal.getScale(), for three callouts ending with code and two ending with a paragraph as controls.Fixes #15014
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.