There is a topic here on meta breaking the layout. I think some overflow hidden is needed.
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.
@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
Can confirm problem exists on OnePlus One on Latest Chrome with specific topic in view
Here is the debugger view:
Oops, yes I can repro it on OnePlus One (Latest Chrome).
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:
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.