Buggy intgeraction of <code> and text-align: justify + my fix

[FrostKiwi]

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:

Screen-20231227-050132.mp4