Horizontal Scroll on mobile

There is a topic here on meta breaking the layout. I think some overflow hidden is needed.

1 Like

Its that giant title got to be a wordwrap break word or something that we can apply.

Yes @techapj and I looked at this once before. I thought we put in the right CSS, maybe not.

Was not able to repro this on topic list page, but opening that exact topic detail page was breaking horizontal scrolling for me on iPhone 6 and OnePlus One.

I pushed a fix which should handle both topic list and topic detail page.

https://github.com/discourse/discourse/commit/68a69c213cc743f3c2d6f632b3a4acd8a4715c80

I think I was not able to repro this on topic list page because both of my testing devices have large screen. :slightly_smiling:

2 Likes

Sorry but it still happening with me :sadpanda:

Latest Chrome @ Android 6

2 Likes

@Falco which device you are on?

I am not able to repro this on my OnePlus One (Latest Chrome, Android 5), and can’t repro it using Chrome Device Emulator on Nexus 4, 5, 6 or 7.

Moto X 2014 XT-1097

1 Like

Can confirm problem exists on OnePlus One on Latest Chrome with specific topic in view

Here is the debugger view:

5 Likes

Oops, yes I can repro it on OnePlus One (Latest Chrome). :frowning:

Yesterday, while testing locally I changed the long word in title from /var/www/discourse/config/discourse.conf to /var/discourse/config/discourse.conf (notice the missing /www) and forgot about this change while making final CSS changes, and hence was not able to repro it.

Adding max-width: 300px to the parent td fixes this issue on Android Chrome. Verified that iOS Chrome is not affected with this change.

PR:

https://github.com/discourse/discourse/pull/3960

3 Likes

Are you sure max width does not cause other issues? Did we test on Android and IOS devices of both small and large size?

Tested the fix on:

  • Chrome: OnePlus One (Android 5), iPhone 6, iPad mini 2, iPad 4
  • Safari: iPhone 6, iPad mini 2, iPad 4

in portrait/landscape mode. Did not noticed any issue.

2 Likes

This issue is fixed now.

4 Likes