Currently contents in code blocks will automatically overflow to the next line when code is too long.
This cause problems especially for mobile platforms with small screens. Line folding disrupts indentation alignment and make the codeblock difficult to read.
Typical solution to this is set overflow-x: scroll in CSS
An example with my own post:
On Discourse’s own forum horizontal scrolling in code blocks seems to be enabled.
Have you actually tried horizontally scrolling a text area in a mobile browser with a touch screen (there are plenty of examples of wide code blocks on StackOverflow for you to try out horizontal scrolling)? Personally I find the response highly unreliable, often taking several swipe attempts for the browser to realize I’m trying to scroll the inner region rather than the outer window, and sometimes downright impossible no matter how many times I try. I’m using Chrome on Android by the way.
The current auto-wrapping setup surely isn’t ideal but at least I am guaranteed to be able to view the entire content when on a mobile platform.
Yes. I routinely browse contents on my phone. Horizontal scrolling also caused problem for me before. But since some point in time, I haven’t had such problems any more (I guess some web standards played a role here?)
Before writing this reply, I tried StackOverflow, GitHub, and the link shared above by @sinoroc (Discourse’s own forum). I used both Safari and Chrome on iOS18 for test. All felt snappy and responsive.
I admit that someone out there running an older or different version of browser/OS might still suffer from such problem. However, at this point in time, I believe most people should have been freed from such problem.
Another difference I noticed when browsing Discourse forum is the font size in their code blocks appears smaller. Python’s version of discourse enlarges font size for code blocks. IMO making font size a little smaller (no larger than normal text) will also make code more readable on small screens (it fits more content).
Overall I believe keeping indentation correct is more important here (since python uses indents instead of brackets). I suffered a lot trying to “guess” the indentation when reading on my phone.
Given the fact that people tends to have their own preferences on this, I’ll consider filing a feature request to discourse to allow each user set their own style.
I’m on the latest Chrome version on the latest Android 15 so it may just be that iOS has this inner-region touch scrolling thing figured out much better than Android.
Yeah normally I would just user-CSS away this kind of style issue, but most mobile browsers don’t support user CSS or any plugin/extension so a feature request to this forum or Discourse may be justified.
