Improve inline code wrapping on mobile viewports, fix weird overflow issue with codeblocks

This commit is contained in:
2024-05-26 15:11:13 -05:00
parent fa285a642e
commit 795b0dedb0

View File

@@ -22,7 +22,12 @@ h6 {
padding: 0.1rem 0.27rem; padding: 0.1rem 0.27rem;
border-radius: 3px; border-radius: 3px;
border: 1px solid rgba(white, 0.4); border: 1px solid rgba(white, 0.4);
white-space: nowrap;
// On really small viewports, word wrapping can be pretty bad with monospaced codeblocks; this allows them to wrap with impunity.
word-break: break-all;
@screen sm {
white-space: nowrap;
}
} }
} }
@@ -49,6 +54,7 @@ div[data-rehype-pretty-code-fragment] {
background-color: #161616 !important; background-color: #161616 !important;
> pre { > pre {
> code { > code {
overflow-x: auto;
padding: 0.5em 0; padding: 0.5em 0;
> span[data-line] { > span[data-line] {