Page MenuHomePhabricator

Mobile web "you are blocked" notice should truncate long block reasons
Open, LowestPublic

Description

Discovered in {T210273#4961412}

block_reason_long_iphone_5.png (568×320 px, 37 KB)

This is what it looks like (according to Chromium and Firefox's responsive design view) on the iPhone 5. The bit that tells the user "You have been blocked from editing $wiki" is cut off. This is an extreme but real life example from en.wiki.

Happens on view ports of that size (320x568) when the block reason goes over about 410 characters. Querying the replica table enwiki_p.ipblocks_compat only 6 of 1174140 have block reasons longer than this.

Event Timeline

Assuming the Anti-Harrassment team is owning this task/working on this one? Is it something that could be done as part of Google Code In?

@Jdlrobson We're not taking on any more blocking related tasks. Could you/someone else from the web team mentor this for GCI?

The web team doesn't really have the right expertise here to work on this :(.

Should this be declined or could some guidance be added on how this should be fixe?

I'm happy to review if I know how to replicate and what the solution should look like, but right now the description is not clear enough for me to help with that!

Happens on view ports of that size (320x568) when the block reason goes over about 410 characters. Querying the replica table enwiki_p.ipblocks_compat only 6 of 1174140 have block reasons longer than this.

I'm inclined to triage this as Lowest priority based on that (I see Trevor already did mark it as such). I wouldn't decline it since it's a valid problem.

@Tchanders @dbarratt Is there any interest in mentoring this task for GCI?

I'm happy to review if I know how to replicate and what the solution should look like, but right now the description is not clear enough for me to help with that!

You should be able to replicate it by blocking yourself locally with a really long reason and attempting to edit on mobile.

As far as solutions go... a simple solution would be to set a max-height on the text element with a text-overflow. That might have some browser quirks (especially if it's multi-line), so you might need to do it with JavaScript...

Another solution would be to provide a truncated version from the server (perhaps adding a param to the endpoint or something), but that kind of feels like overkill when you could do the same thing with JS anyways).