Codeblocks break out of their parent containers if too long

[thunderbiscuit]

This creates problems for the Example Wallet and Installation pages.

To reproduce, open the Example Wallet page and shrink your page to a width of 1200px.

[thunderbiscuit]

This problem changes at the exact width of 1024px, where the codeblocks do behave normally, except that their overflow-x is now hidden and so can't be scrolled to.

[thunderbiscuit]

Actually this is a weird one. The codeblocks do behave normally at really wide widths (the first codeblock on the installation page does have an x-axis scroller and the line of code is longer than the codeblock.

Yet the problems definitely come from the long codeblocks, as removing them from the markdown immediatly fixes the issue.

[thunderbiscuit]

I don't know why the overflow: auto property on the pre tag doesn't achieve our desired result (it does on other projects of mine). See this page for my desired behaviour for the code blocks.

I have an intermediate not optimal solution for the moment in bitcoindevkit/bitcoindevkit.org-old#23. I use

pre {
  white-space: pre-wrap;
}

which wraps the longer lines of code. Now the articles are readable on mobile. It's not actually that bad, but I do prefer when the lines can be scrolled horizontally. This is particularly important for logs, where if the long lines wrap the code become unreadable.

Merging bitcoindevkit/bitcoindevkit.org-old#23 will be fix most of our problems, and allow tablet/mobile users to read docs.

[notmandatory]

Moving this to the new magicalbitcoin.org based site so we can verify we don't have any similar issues there

[thunderbiscuit]

This is not a problem with the new website; I'm closing this issue.