Reactjs.org: Horizontal scrolling can break on mobile

[sophiebits]

Spotted this on Twitter: https://twitter.com/wojtekmaj91/status/1063708337177534465

Didn’t verify myself.

[gaearon]

Also https://twitter.com/fabian_krutsch/status/1064762103553294336

[jesseyuen]

Hello! Adding a width or max-width of 100% to <article class="css-174qq1k"> seems to fix the issue for Firefox (63.0.1 ) on desktop on this page: https://reactjs.org/docs/faq-versioning.html

I've not confirmed this fixes it on a device yet :)

[morajabi]

Do you use a JavaScript media query condition for some mobile UI? It might be Gatsby's initial render which uses the prerendered UI, and those JavaScript media's don't get re-evaluated on initial render on mobile.

[omasback]

the main column div is display: flex but it's not flex-direction: column even though it shoudl be a column layout.

The production className is css-j4q8zh. No idea what that is in the source code

this is only broken on Firefox for Android as far as i can tell. I'm not sure What the spec is here but Firefox tends to be most faithful to the CSS specs in my experience.

[manuelitox]

The faster fix to avoiding the unbreakable long words is to add word-break: break-all; to the wrapper div.css-j4q8zh

[solarsoft0]

got your tweet dan, i just checked, it fine on my android, also tried recreating the url as an intent from twitter it was fine too, i think @wojtekkmaj91 should give us more info, like the device and browser details

[gaearon]

Thanks everyone!

[gaearon]

I initially merged https://github.com/reactjs/reactjs.org/pull/1414 but it broke sidebar on desktop. We need a fix that works both on desktop and mobile.