Problem with overflow management on Gutenberg code block on chrome

[dcschreiber]

Describe the bug
I have a code block with a long link and on Chrome on mobile the line is running out of the screen (No wrapping or overflow management). On Firefox mobile there is wrapping.

I am still seeing this on my website neutro when I view it on Chrome (Desktop windows 10 with mobile emulation and android 11. Chrome version version 86.0.4240.111) but not on Firefox (mobile version 82.1.1).
The problem is when I have a long URL in a Code block.
You can see my site here
WordPress 5.5.1
Theme Neve Version: 2.8.3

[OsakaWebbie]

I'm using Firefox on PC (v. 82), and code blocks now fail to wrap here also (destroying a layout that was fine a week ago - see https://abide-osaka.org/message-posting-clues/). I also have Chrome (v. 86) - I don't normally use it, but it also fails.

The code still wraps in the Wordpress editor - it only fails on the front-end.

[jasmussen]

Thanks for the ticket, and thank you for the feedback.

Since it's suggested that this used to work but works no longer, I investigated whether this block changed in any way recently, and the only change made was in #26347 — @ellatrix do you have any idea whether that PR could've caused wrapping issues like these?

I'm going to create a PR to add a scrollbar to handle overflow, and wrapping with theme opt in.

[ellatrix]

We recently changed the code block to not use a textarea anymore, which now reflects the front-end. So if there's no wrapping on the front-end, there's no wrapping in the editor either.

[jasmussen]

Interesting, but this would only affect the editor state, if anything, right?

[kjellr]

I just tested this using an old WP version (5.3), and it looks like the editor did wrap the code block by default, but the front end did not.

Twenty Nineteen and Twenty Twenty provided front-end styles to enforce the wrapping there. In general, I think we should just make them match by default. Given that the past two default themes had these wrap, I think it's fine to wrap them by default natively.

[ellatrix]

In principle I think the editor should not be providing any styles by default, but if the default styles for this tag are bad, then it makes sense.

Interesting, but this would only affect the editor state, if anything, right?

What do you mean by editor state? A change from a text area to content editable does affect the wrapping. Text areas always wrap.

[jasmussen]

What do you mean by editor state? A change from a text area to content editable does affect the wrapping. Text areas always wrap.

Right, I suppose to Kjell point, it always worked as it should in the editor, that is, with wrapping. The missing piece was the frontend.