Code boxes in mobile have line wrapping

[AbydosOne]

Browser, version and OS: Chromium 100/Chrome [newest] (Win10); Chrome 109 (Android 12)

 

Steps to reproduce/what were you doing before it happened?

Put a long enough line of text into a code box to exceed width of display column.

 

What happened?

Line wrapping text contained within code box, but only on mobile/small window desktop

 

What did you expect to happen?

Box to behave as it does on (wide) desktop, most of the time (scroll if text is wider than screen width)

 

(also, for some reason, the default monospaced text on Android isn't actually fully monospaced, if you want to look into that too)

 

Link to a page where it happened, if applicable: 

 

Screenshots of the issue, if applicable: 

 

(desktop)

 

(desktop, after a certain amount of horizontal shrinking)

 

Seems to be related to "white space: pre wrap" CSS option (issue goes away when unchecked in Inspector):

 

 

Any other relevant details:

Probably a feature, not a bug, but it messes with my beautiful box-drawing-character-art on mobile. Maybe an option to enforce line wrapping (on by default, but able to be turned off).

 

If it's a cloudflare error, what was the ray ID from the bottom of the error page?

None.

[colonel_mortis]

This is working as intended - dealing with code blocks that don't wrap on mobile is basically unusable, because you have to constantly scroll back and forth, so wrapping makes the experience much better. It does break things when you're trying to draw a diagram rather than write code, but that is pretty rare compared with writing actual code.