fix code breaks along x axis

[ejmg]

addresses issue #11 by adding overflow-x: scroll to the formatting of codeblocks under pre in _main.scss

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/ejmg/zerm/qxiox6x27
✅ Preview: https://zerm-git-overflow-x.ejmg.vercel.app

[ebkalderon]

This fix doesn't seem to work in practice, sadly. After consulting Inspect Element → Responsive Design Mode in Firefox, I see that the overflow-x: scroll CSS property doesn't get applied because _main.scss:188 applies white-space: pre-wrap on the outer pre tag on small screens, which prevents the code blocks from scrolling.

If I uncheck the white-space: pre-wrap property of the pre tag in Inspect Element to disable it, I get the correct scrolling behavior. Disabling word-wrap: break-word doesn't seem to have any effect on the scrolling.

After playing around with this branch a bit, I think a more general solution to #11 would be to:

1. Use overflow-x: auto instead of scroll, to ensure on all browsers that the scrollbar only appears if the content overflows (source).
2. Remove _main.scss:188 (possibly consider removing the entire @media query at _main.scss:187-190, since we aren't text-wrapping pre and code tags anymore).

What do you think about this, @ejmg? Does this work for you, or do you have an alternative solution?

[ejmg]

wew, it's been a while since touching this. that seems reasonable as a fix. i'm currently trying to work through the backlog of PR's and will try coming back to this one soon after the rest.

[ebkalderon]

Any luck with this? I'd still like to see #12 (comment) land in mainline someday, since code blocks are still broken on mobile devices with this theme.

[ejmg]

It’s been a moment since I’ve touched the repo but I happen to have time today. I’ll try revisiting the PR.

…

On Mon, Nov 14, 2022 at 10:21 PM Eyal Kalderon ***@***.***> wrote: Any luck with this? I'd still like to see #12 (comment) <#12 (comment)> land in mainline someday, since code blocks are still broken on mobile devices with this theme. — Reply to this email directly, view it on GitHub <#12 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEK7ZPXDCDHVKPCC7TGKAN3WIMFUXANCNFSM4W3RDCGQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[ebkalderon]

That would be wonderful! Thank you so much, @ejmg. It would be wonderful to get a few of these quality-of-life fixes in soon, but feel free to take as much time as you need.