Fix scrolling

[lino-levan]

Currently, long individual lines of code are kind of broken. This is actually non-trivial to fix with the current setup and would probably require a major refactor on how we render a snippet. Looking at the code, this looks like a known issue and the bandaid fix is to just hide the overflow.

This is currently affecting the site a little bit, but it's not super major because copy/paste still works fine:

[lino-levan]

I've been thinking about this recently and it feels like we should be able to hack something together. Essentially this is a game of "is it easier to align the text with the code or align the scrolling of the code". I believe that it must be easier to align scrolling of the code than aligning the text so the idea might be something similar to https://codesandbox.io/s/8wvi7 (but obviously horizontal). Apologies for the ramble, it's pretty late where I am.

[tetraphobia]

I think a refactor of these pages would probably be warranted. I'm happy to tackle this if it's desired by the maintainers.

The way that the paragraph and the code blocks are aligned reads far better on mobile than it does on desktop. I would just add the relevant code snippets below each paragraph and keep the full code on the right. That way it's still mobile friendly without the undesired behavior on desktop.

Additionally, because the complete code on the right needs to be segmented, you get some awkward code snippets like this:

where copying the code snippet also copies a closing bracket. Having control over what code is displayed in the snippet, and thus, what code is copied is a big UX improvement for the reader, as well as the developer of the page.

I would start by refactoring the page to use a single-row, two column layout, simplify the implementation of the code block and remove the splitting functionality, and then refactor each page to use the new layout.