fix: Incorret collapsing of mermaid diagram margins, closes #6373

This commit is contained in:
Tom Moor
2024-01-18 21:39:37 -05:00
parent ff8b3cc0f4
commit 8df77fe478

View File

@@ -1134,18 +1134,23 @@ mark {
} }
.code-block[data-language=mermaidjs] { .code-block[data-language=mermaidjs] {
margin: 0.75em 0;
pre { pre {
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
margin-bottom: -12px; margin-bottom: -20px;
overflow: hidden; overflow: hidden;
} }
/* Hide code without display none so toolbar can still be positioned against it */ // Hide code without display none so toolbar can still be positioned against it
&:not(.code-active) { &:not(.code-active) {
height: ${props.staticHTML ? "auto" : "0"}; height: ${props.staticHTML ? "auto" : "0"};
margin: -0.5em 0; margin: -0.75em 0;
overflow: hidden; overflow: hidden;
// Allows the margin to collapse correctly by moving div out of the flow
position: absolute;
} }
} }
@@ -1185,6 +1190,7 @@ mark {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 0.75em 0;
min-height: 1.6em; min-height: 1.6em;
background: ${props.theme.codeBackground}; background: ${props.theme.codeBackground};
border-radius: 6px; border-radius: 6px;