Meta Stack Exchange is a question and answer site for meta-discussion of the Stack Exchange family of Q&A websites. It only takes a minute to sign up.
Sign up to join this community
As one of the two users of a Windows Phone on Stack Exchange, I know we're not getting a native app (until Windows Phone supports .iap ;)), so I muddle along with Mobile View.
The fixed width, no resize, overflow hidden options used often result in text being hidden on the right hand edge if a code block is used.
I'm running a Lumia 1020 running at 768x1280.
An example of a page with this issue:
How do I make it difficult for users to make multiple accounts
This appears to be at least somewhat browser (and possibly device and font) dependent. While I cannot reproduce this issue with your example answer in either Chrome or Firefox on my Android tablet, nor in the Firefox dev tools responsive design mode on my desktop, I can reproduce it in both Firefoxes (but not on Chrome) with this answer of mine (where the actual culprit seems to be the image, and not the code).
Anyway, one aspect of the problem that I did find the cause for is the lack of overflow. Basically, for whatever reason, the current mobile view style sheet contains the following conflicting rules (other non-conflicting styles trimmed for clarity):
.answer-summary { overflow: auto }
.answer { overflow: hidden }
Alas, because these rules have equal specificity, the latter one (i.e. overflow: hidden) takes precedence. This is what's causing any overflowing answers to be clipped, preventing them from scrolling sideways.
A simple quick fix would be to add the following, more specific CSS rule:
.answer.answer-summary, .question.question-summary { overflow: auto }
This should at least allow you to scroll such overflowing answers sideways or zoom out to read them.
(I'd add this style to SOUP, but no mobile browsers that I know of support user scripts, so there's not much point.)
