| Iniquity | |
| Feb 24 2024, 12:15 PM |
| F43359996: image.png | |
| Mar 25 2024, 7:29 PM |
| F43359952: image.png | |
| Mar 25 2024, 7:29 PM |
| F42857461: image.png | |
| Mar 20 2024, 4:16 PM |
| F42849353: screenshot 7.mov.gif | |
| Mar 20 2024, 2:19 PM |
| F42849249: screenshot 6.mov.gif | |
| Mar 20 2024, 2:18 PM |
| F42183615: Screenshot 2024-02-27 at 9.46.19 AM.png | |
| Feb 27 2024, 4:46 PM |
| F42174183: Screenshot 2024-02-27 at 10.51.36 AM.png | |
| Feb 27 2024, 9:52 AM |
| F42084330: image.png | |
| Feb 24 2024, 12:15 PM |
Steps to replicate the issue (include links if applicable):
What happens?:
What should have happened instead?:
Buttons should be wrapped on a new line
Other information (browser name/version, screenshots, etc.):
iPhone 12 mini, latest OS, latest Chrome
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T358424#9645826 |
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T358424#9645832 |
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| Make watchlist more responsive | mediawiki/core | master | +12 -0 |
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Open | bwang | T361737 [EPIC] With the current layout, some elements extend beyond the content area and overlap sticky page tools | |||
| Resolved | BUG REPORT | ovasileva | T358424 The watchlist menu extends beyond its area on mobile | ||
| Open | None | T361676 The watchlist menu extends beyond its area on mobile between 1200-1237px |
I assume this should be added to the list of pages where limited width does not apply @ovasileva @JScherer-WMF?
+1, I think for this limited width not applying makes sense. Also wanted to note that I'm having trouble reproducing. I'm seeing wrapping correctly on my side.
@ovasileva that doesn't look like what you should be seeing on a mobile device - is that a screenshot of a resized screen?
I can replicate this on desktop at 1010px with both sidebar and main menu pinned to the right and left.
I misunderstood the work this task involves - the limited width for content is already disabled on watchlist. There is a limited width that applies to all pages that is causing issues here.
The issue here is the filters UI is not responsive. The label for the mark all as read button is exceptionally longer than other projects.
Change 1011004 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):
[mediawiki/core@master] Make watchlist more responsive
Change 1011004 merged by jenkins-bot:
[mediawiki/core@master] Make watchlist more responsive
Status: ✅ PASS
Environment: rubeta
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA
Test Artifact(s):
Steps to replicate the issue (include links if applicable):
Open on mobile or with devtools https://ru.wikipedia.org/wiki/Служебная:Список_наблюдения?uselang=ru on beta https://ru.wikipedia.beta.wmflabs.org/wiki/%D0%91%D0%B5%D0%BB%D1%8B%D0%B9_%D0%BC%D0%B5%D0%B4%D0%B2%D0%B5%D0%B4%D1%8C
Look at filters
✅ AC1: Buttons should be wrapped on a new line
Status: ✅ PASS
Environment: testwiki
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA
Test Artifact(s):
Steps to replicate the issue (include links if applicable):
Open on mobile or with devtools https://ru.wikipedia.org/wiki/Служебная:Список_наблюдения?uselang=ru on beta https://ru.wikipedia.beta.wmflabs.org/wiki/%D0%91%D0%B5%D0%BB%D1%8B%D0%B9_%D0%BC%D0%B5%D0%B4%D0%B2%D0%B5%D0%B4%D1%8C
Look at filters
✅ AC1: Buttons should be wrapped on a new line
tested the watchlist filters on testwiki with uselang=ru
Test Result - Beta
Status: ✅ PASS
Environment: rubeta
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NATest Artifact(s):
QA Steps
Steps to replicate the issue (include links if applicable):
Open on mobile or with devtools https://ru.wikipedia.org/wiki/Служебная:Список_наблюдения?uselang=ru on beta https://ru.wikipedia.beta.wmflabs.org/wiki/%D0%91%D0%B5%D0%BB%D1%8B%D0%B9_%D0%BC%D0%B5%D0%B4%D0%B2%D0%B5%D0%B4%D1%8C
Look at filters
✅ AC1: Buttons should be wrapped on a new line
Just FYI: Win10, Chrome
On iPhone - OK.
Just FYI: Win10, Chrome
I can replicate that on Chrome only between 1200-1237px. I think to address this a more significant refactor of the Watchlist design would be needed to move it away from table-based layout (and that would be out of scope for the web team - as this is not a product we maintain). If we wanted a quick fix we could make the header scrollable.
My feeling is this is acceptable for now, particularly given the sidebar can be collapsed.
It also seems to me that this is not critical, this resolution is extremely rare. But this is a bug and it seems to me that it should be “remembered” for the future.
Totally. @ovasileva let me know if you need help creating a new ticket capturing the "correct" way to address this. This would be a task for the Growth-Team
I decided to check languages with long words and this is what I found:
https://meta.wikimedia.org//wiki/Special:Watchlist?hidepreviousrevisions=1&hidecategorization=1&hideWikibase=1&limit=250&days=3&urlversion=2&uselang=ml
https://meta.wikimedia.org/wiki/Special:Watchlist?hidepreviousrevisions=1&hidecategorization=1&hideWikibase=1&limit=250&days=3&urlversion=2&uselang=tyv
https://meta.wikimedia.org/wiki/Special:Watchlist?hidepreviousrevisions=1&hidecategorization=1&hideWikibase=1&limit=250&days=3&urlversion=2&uselang=bci
I’ve been wanting to ask for a long time, do we have any analytics for line length in different languages? :)
I’ve been wanting to ask for a long time, do we have any analytics for line length in different languages? :)
Do you mean recommendations for optimum line length?
Yes, because this is not the first bug where the layout goes wrong due to long words :)
@Iniquity - thanks for the steps. Opened T361676: The watchlist menu extends beyond its area on mobile between 1200-1237px for tracking
