[standard.css] Consider using break-word regardless of viewport width

[donovanglover]

Some WHATWG specs don't fit smaller viewport sizes. I'm not sure how many specs are affected, but I did find one prominent example.

Consider: https://fetch.spec.whatwg.org/#cors-protocol-examples

Here the API key causes the page to overflow on (smaller) viewports greater than 767px. It may be best to just use word-wrap: break-word; all the time to avoid this issue.

[domenic]

Works fine in Chrome and Firefox on Android. What are you testing with?

You can scroll horizontally because of the table above, but next to the linked example there's only whitespace.

[donovanglover]

This issue occurs on a desktop (or any) browser with a viewport width greater than 767px but less than the amount required for long lines like these to be rendered without overflowing the box.

The minimal width required to prevent this issue from happening varies between systems since they use different fonts, but for me this threshold was around 1000px (for https://fetch.spec.whatwg.org/#cors-protocol-examples).

[domenic]

Here is a screenshot of the issue:

In my opinion we should indeed do something here. I see two reasonable options:

• Preserve author intent, and don't wrap on desktop (> 767px viewports) unless there are lines in the source text. This would mean moving from pre { white-space: pre-wrap } to pre { white-space: pre }
• Say that we want to avoid scrollbars as much as possible, by using pre { word-wrap: break-word } even on desktop.

I think our current state is a bad intermediate.

Do folks have opinions?

[annevk]

I cannot reproduce this in Chrome or Firefox. I don't see any horizontal scrollbars. The text is wrapped further.

[domenic]

Once you get a viewport width below 767px, it is, since then our mobile styles kick in. But between 767px and wide-enought-to-fit-the-GUID-on-one-line, there's wrapping.

[annevk]

I suspect I'm missing something, but I cannot get horizontal scrollbars however small I make the width:

[domenic]

Sorry, I misspoke. Above 767px is where they kick in. (Until you make it wide enough that everything fits anyway.) Try for window.clientWidth === 770px or so.

[annevk]

Aah, I tried that too, but what I did not notice is that the scrollbars are not visible by default and since the URL contains a lot of noise that was not very clear.