Buggy intgeraction of <code> and `text-align: justify` + my fix
FrostKiwi opened this issue · comments
The following is (seemingly?) not a bug of Sakura.css in it's default config, but when in context of a paragraph that has text-align: justify; active and a <code> tag present. Fixable via code { white-space: unset; }
I still wanted to mention it, in case anyone comes across this.
Both interact weirdly and cause a pet-peeve of mine, articles that should be horizontally scroll-locked, scrolling to the side as you try to read the article. There is this happening on this post in my Tech Blog https://blog.frost.kiwi, which uses Sakura.css.
Screen-20231227-050101.mp4
You can see the article scrolling side to side, even though it should be locked in one column. Culprit is this <code> block growing beyond the <main> tag's width, which has text-align: justify applied.
In my blog I fixed this via this commit and inserting a code { white-space: unset; } in this line.
With the fix applied, it now is a proper single column, without horizontal scrolling: