Page MenuHomePhabricator

Add a link: beta wiki, issue with width display on mobile of Growth feature: Add a link
Closed, ResolvedPublic

Description

Context:
On ar.wikipedia.beta.wmflabs.org the display is messed up if the "Add a link" is selected from the suggested edits.

Problem:

  1. Create an account on ar.wikipedia.beta.wmflabs.org
  2. Use Arabic as the default language
  3. On a mobile device (I was using Firefox), go to the Homepage
  4. Go to the Suggested edits and select Easy - Add links between articles - Machine suggestions from Types of edits (second check bow from the top) and make sure to uncheck all other boxes.
  5. Tap on Types of edits again, or Select topics, or on the "i" icon.
  6. Notice that all the pages are stuck on the left and the width of the display doesn't fit the screen.

Screen recording

Everything returns to normal if you unselect the Add links between article and choose other edits.

Event Timeline

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

@Dyolf77_WMF is the recording from an actual device or from an emulator? @MMiller_WMF & @Etonkovidova filed a similar issue recently, but it seemed to affect only the browser emulator.

kostajh triaged this task as Medium priority.Tue, Apr 27, 5:55 PM

I can reproduce this on a (real) mobile Firefox browser.

@Dyolf77_WMF is the recording from an actual device or from an emulator? @MMiller_WMF & @Etonkovidova filed a similar issue recently, but it seemed to affect only the browser emulator.

It is a real phone (Samsung A50 android 11, Firefox 88.1.1 )

MMiller_WMF renamed this task from Beta wiki, issue with width display on mobile of Growth feature: Add a link to Add a link: beta wiki, issue with width display on mobile of Growth feature: Add a link.Tue, Apr 27, 11:20 PM
MMiller_WMF edited projects, added Growth-Team (Current Sprint); removed Growth-Team.
MMiller_WMF moved this task from Incoming to QA on the Growth-Team (Current Sprint) board.

@Etonkovidova -- could you verify this and explore the extent of the bug? Then we'll decide how to triage it.

Notice

  • the issue is present in testwiki (wmf.3) if a user lang is changed to one of RTL languages.
  • the "Suggested edits" title is missing
  • I checked the current production (wmf.1) - no regression.


(click to see the animated gif)

The issue is reproducible on all mobile Android emulators in Firefox (Chrome mobile emulators do not display the issue). The iOS real device and iOS emulators in FF and Chrome do not display the issue.

typethe issue is present?
(reported by @Dyolf77_WMF) a real phone Samsung A50 android 11, Firefox 88.1.1yes
(confirmed by @Tgr ) a real phone FFyes
Firefox 88 emulators Android 5, 7, 8yes
iOS real deviceno
iOS emulator FF and Chromeno

The Console shows several CSS errors:

Unexpected token ‘-’ in media list. load.php:1:422995

Unknown property ‘-moz-column-width’.  Declaration dropped.

Error in parsing value for ‘font’.  Declaration dropped. load.php:1:422917
Elements matching selector: html
NodeList(1)
​
0: <html class="client-js mf-font-size-n…Manager-ios-modal-ready" dir="rtl" lang="fa">
​
length: 1

Hi @Etonkovidova, in the pictures you shared, the interface is not in Arabic, I think it is Farsi, so I presume the issue is also in Farsi Wikipedia (maybe all RTL languages)

Hi @Etonkovidova, in the pictures you shared, the interface is not in Arabic, I think it is Farsi, so I presume the issue is also in Farsi Wikipedia (maybe all RTL languages)

Right, sorry - it's Farsi. I was checking RTL languages - and making screenshots for different RTL languages. I'll correct my comment to make it refer to all RTL languages.

In Firefox, the scrollWidth of the topics overlay is incorrect, it should be the same as window.innerWidth

Change 685118 had a related patch set uploaded (by MewOphaswongse; author: MewOphaswongse):

[mediawiki/extensions/GrowthExperiments@master] Add a link: fix Special:Homepage display issues on mobile

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

Firefox Android w/latest changes:

This patch also addresses the additional whitespace on the side on mobile (all browsers).

Change 685118 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Add a link: fix Special:Homepage display issues on mobile

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

Checked arwiki betalabs - the issue is fixed.

Thanks!