Horizontal Scroll on mobile


(Rafael dos Santos Silva) #1

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


Non-wrapping topic titles extend beyond page width
(Sam Saffron) #2

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


(Jeff Atwood) #3

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


(Arpit Jalan) #4

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.

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


(Rafael dos Santos Silva) #7

Sorry but it still happening with me :sadpanda:

Latest Chrome @ Android 6


(Arpit Jalan) #8

@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.


(Rafael dos Santos Silva) #9

Moto X 2014 XT-1097


(Dean Taylor) #10

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

Here is the debugger view:


(Arpit Jalan) #11

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:


(Jeff Atwood) #12

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


(Arpit Jalan) #13

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.


(Arpit Jalan) #14

This issue is fixed now.


(Arpit Jalan) #15