Page MenuHomePhabricator

"Thank" link is super tiny in desktop view on small screen widths in WebKit based browsers
Open, Needs TriagePublic

Description

Summary
When users visit the page history using a web browser on a mobile device the link to "Thank" another contributor is rendered incredibly small.

Screenshot:

screen_shot_2018-11-29_at_8.13.24_am.png (396×634 px, 114 KB)

Description
Visit the page history of an article using the Vector skin on a mobile device. The user report below indicates they were using Chrome.

The link for Thanks is rendered at a much smaller size than the rest of the metadata for the revision. See the second revision in the screenshot above . At the end of the revision is the tiny link.

Expected behavior
The links for Thanks will be rendered at the same size as other information in the revision regardless of browser or platform.

Original report:
https://en.wikipedia.org/wiki/Wikipedia:Village_pump_(technical)#Facing_an_issue_with_mobile_edit

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript

Hi @CKoerner_WMF ,
looking at this but cannot reproduce it. Can you still reproduce it on your side? Which version of chrome do you use?
Thanks

Aklapper changed the task status from Open to Stalled.Apr 4 2019, 10:15 AM
Aklapper added a subscriber: Adithyak1997.

Not sure why this was proxied to Phabricator. :)
https://en.wikipedia.org/wiki/Wikipedia:Village_pump_(technical)/Archive_171#Facing_an_issue_with_mobile_edit

The problem in that screenshot above is not only small Thank confirmation text but also small radio buttons between "(cur | prev)" and the date, and small stuff in the box at the top, and the top bar, and small stuff in the side bar. So I do not see any Thanks issue here.

We'd need steps to reproduce how to get some super small elements and some very large elements. Because Chromium here in Vector skin does not behave like that.

Does this problem still happen when explicitly using safemode? Does this still happen after removing custom user CSS?
See https://www.mediawiki.org/wiki/Help:Locating_broken_scripts

@Aklapper, so you mean I need to clear those files and check it?

You don't have to clear common.js if you follow https://www.mediawiki.org/wiki/Help:Locating_broken_scripts . Not sure if that also covers common.css so you may want to clear that.

In any case we need steps that allow reproducing that lots of text is small and lots of text is large. Because I cannot reproduce...

Actually, I have followed the instructions provided in the link https://www.mediawiki.org/wiki/Help:Locating_broken_scripts. The result was same as

The problem in that screenshot above is not only small Thank confirmation text but also small radio buttons between "(cur | prev)" and the date, and small stuff in the box at the top, and the top bar, and small stuff in the side bar.

When checked at the time of posting this task, it was only the Thank and Cancel buttons that appears to be too tiny. Now, it's including current and previous also. I think the texts current, previous as well as the thank and cancel buttons (these two appear when I press the Thank button) needs to be made of the same size as that of other texts.

Screenshot_2019-04-04-18-57-18-133_com.android.chrome.png (1,080×2,160 px, 428 KB)
This is the way in which I see the History page of the English wiki page Wikipedia:Village Pump.

Ah! I could finally reproduce this in Chromium 73 only when using the device toolbar to change its width. Confusing that it didn't work when just reducing the browser window size width. Sorry that I didn't try that earlier (Firefox does not behave like that)!

Screenshot from 2019-04-04 16-18-42.png (888×723 px, 181 KB)

Aklapper renamed this task from Thank link is super tiny to "Thank" link is super tiny in desktop view on small screen widths in Chromium.Apr 4 2019, 2:24 PM
Aklapper changed the task status from Stalled to Open.

Not sure why this was proxied to Phabricator. :)

I'm confused by this. Should I have done something differently? Was my description not well understood? I want to improve my bug reporting skills. :)

(@CKoerner_WMF: I wrote that as the reporter has a Phab account I guess)

I don't think this is only effecting Chrome (Blink) users. I'm able to reproduce on iOS using Safari (Webkit). I see this behavior when both logged out and logged in. As you can see it's also effecting other links such as "Cur, Prev, and Undo" as Andre pointed out. So not Thanks-specific and not Chrome specific. :/

I can not reproduce it on the desktop version of Safari using the developer "Responsive Design Mode" which emulates a mobile device.

Image-1.jpg (828×1,792 px, 414 KB)

Aklapper renamed this task from "Thank" link is super tiny in desktop view on small screen widths in Chromium to "Thank" link is super tiny in desktop view on small screen widths in WebKit based browsers.Apr 8 2019, 2:59 PM

Change #1343224 had a related patch set uploaded (by Sanskardubey; author: Sanskardubey):

[mediawiki/extensions/Thanks@master] Thanks: keep Thank link size consistent on narrow WebKit

https://gerrit.wikimedia.org/r/1343224