Long code lines break
redstreet opened this issue · 3 comments
Thanks for creating and sharing this awesome software!
A line of code within four backticks that is longer than the main column breaks the page: the backlinks boxes disappear, text doesn't get wrapped, and there is no horizontal scrolling.
Expected behavior: text column width remains the same; scroll bar shows up within the code-source section alone.
Reproducible on Firefox and Chrome.
Here's a test case that makes the bug manifest. Notice there is no horizontal scroll bar in the screenshot below, either within the code section (preferred) or even for the page (browser's scrollbar).
---
title: testbug long lines
---
# Using Your Markdown Knowledge Base on an Untrusted Computer
Dapibus quis, imperdiet id, commodo a, lacus. Cras sit amet erat et nulla varius
aliquet. Aliquam erat volutpat. Praesent feugiat vehicula pede. Suspendisse pulvinar,
orci in sollicitudin venenatis, nibh libero hendrerit sem, eu tempor nisi felis et
metus. Etiam gravida sem ut mi. Integer volutpat, enim eu varius gravida, risus urna
venenatis lectus, ac ultrices quam nulla eu leo. Duis arcu. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos himenaeos.
```bash
2021/02/26 22:23:40 ERROR : perf/SPEEDTEST.ref/.obsidian/workspace: Failed to copy: corrupted on transfer: MD5 crypted hash differ "1425e09b36ee959dbe81d94798a35d44" vs "be1125c1cb45531653b55d36ae1cf54c"
```
I'm realizing this may not be a digital-garden-jekyll-template
issue, but a jekyll issue. Either way, help is most appreciated. I've spent hours on this with no luck :(.
The problem is explained here, along with a fix. The fix, for mobile and larger screens, respectively are:
grid-template-columns: minmax(0, 1fr);
, and grid-template-columns: minmax(0, 3fr) 1fr;
in _style.css
like so:
#notes-entry-container {
display: grid;
grid-gap: 2em;
grid-template-areas:
"content"
"side";
grid-template-columns: minmax(0, 1fr);
@media (min-width: 700px) {
grid-template-columns: minmax(0, 3fr) 1fr;
grid-template-areas: "content side";
}
}