Code block display problem on smartphone and reduced window about no-style-please HOT 3 CLOSED

I think the problem is due to the CSS rule width: fit-content in the wrapper div. I'll take a look into it and fix it

from no-style-please.

hello, I just tried it and its works fine on my side too
I just use the code blocks for the way they look on the page haha, but i apreacciated it
thanks for fixing it, this is a great theme
gracias

from no-style-please.

I investigated a bit and that's what I found.

First of all, the problem has nothing to do with dark mode since it also occurs in light mode. Moreover, in my tests this problem occured only in Chrome and Safari.

It has to do with <code> tags that don't seem to work as expected. All other elements (images, blockquotes, tables, ...) respect the size of the parent wrapper div (<div class="w">), but <code> doesn't. It takes up all the width necessary to render its longest line, up to a max width of 640px (defined again in the wrapper div).

This surely has something to do with the wrapper div style: width: fit-content. Removing that line solves the problem, but brings some inconveniences so I don't want to change it.

Instead I added white-space: pre-wrap to the style of <code> elements. This solves the problem but has the incovenience that now lines in blocks wrap if they're too long. Not the best imo but it's okay for now.

from no-style-please.