Page MenuHomePhabricator
Create Task
Maniphest T259320

The options under Visual mode start overlapping at certain point and become completely un-usable
Closed, ResolvedPublic
Actions

Assigned To
matmarex
Authored By
Ryasmeen
Jul 31 2020, 1:05 AM
Tags
Referenced Files
F32142404: mobile.png
Aug 14 2020, 8:06 PM
F31956064: image.png
Jul 31 2020, 8:59 PM
F31956062: image.png
Jul 31 2020, 8:59 PM
F31956069: T259320.webm
Jul 31 2020, 8:59 PM
F31956059: image.png
Jul 31 2020, 8:59 PM
F31955014: Screen Shot 2020-07-30 at 6.02.48 PM.png
Jul 31 2020, 1:05 AM
F31955017: Screen Shot 2020-07-30 at 5.55.17 PM.png
Jul 31 2020, 1:05 AM
Subscribers
Aklapper
Esanders
• iamjessklein
JTannerWMF
matmarex
• ppelberg
Ryasmeen
Tacsipacsi

Description

Steps to reproduce:

  1. Go to the bottom of this page: https://en.wikipedia.beta.wmflabs.org/wiki/User_talk:RYasmeen_(WMF).
  1. Click on Reply links starting from the comment "10th comment" and onwards.

Notice that the options under Visual mode start getting overlapping with the options "Source" and "Visual" more and more as you go towards the end of the page. At some point, all of them become completely unusable.

Screensize: Mac 13 inch.

Here are some screenshots:

Starts overlapping like this:

Screen Shot 2020-07-30 at 6.02.48 PM.png (698×816 px, 63 KB)

Gets worse:
Screen Shot 2020-07-30 at 5.55.17 PM.png (1×988 px, 90 KB)

Details

SubjectRepoBranchLines +/-
Follow-up I6f6a869: Apply flex wrapping of actions in anon mode as wellmediawiki/extensions/DiscussionToolsmaster+7 -1
Allow reply widget header and footer to wrap when it's narrowmediawiki/extensions/DiscussionToolsmaster+26 -10
Customize query in gerrit

Related Objects

Event Timeline

Ryasmeen created this task.Jul 31 2020, 1:05 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 31 2020, 1:05 AM
gerritbot added a comment.Jul 31 2020, 8:56 PM

Change 617771 had a related patch set uploaded (by Bartosz Dziewoński; owner: Bartosz Dziewoński):
[mediawiki/extensions/DiscussionTools@master] Allow reply widget header and footer to wrap when it's narrow

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

gerritbot added a project: Patch-For-Review.Jul 31 2020, 8:56 PM
matmarex added a comment.Jul 31 2020, 8:59 PM

With this patch, the mode switcher and the footer text will wrap in a more sensible manner when they run out of space:

image.png (1×2 px, 540 KB)
image.png (1×1 px, 435 KB)
image.png (1×1 px, 252 KB)

Video:

The interface still falls apart a bit when it's extremely narrow (i.e., when replying to extremely nested comments). I'm not sure if we should try to handle those cases better.

• ppelberg edited projects, added OWC2020 (Reply Tool Opt Out), Editing-team (Kanban Board); removed OWC2020.Jul 31 2020, 9:08 PM
• ppelberg added a subscriber: • iamjessklein.

I feel there is an open question for @iamjessklein here:

  • How should the Reply Tool look and behave at various widths?
• ppelberg added a project: Editing Design.Jul 31 2020, 9:10 PM
• ppelberg moved this task from 📚 Backlog to 📢 To Do on the Editing Design board.
• ppelberg moved this task from Needs Prioritization to Required after release on the OWC2020 (Reply Tool Opt Out) board.Aug 1 2020, 1:53 AM
Esanders subscribed.Aug 4 2020, 2:28 PM

I think this is very low priority. I don't think we need to design too much for very low widths on desktop. In general the whole interface, not just our tool, breaks down below a certain size.

Tacsipacsi subscribed.Aug 4 2020, 4:46 PM

This not only affects narrow screens, but also much-indented comments on wider screens. In that case, the rest of the interface is not broken, since that’s not indented.

• ppelberg moved this task from Incoming to Doing on the Editing-team (Kanban Board) board.Aug 5 2020, 4:13 PM
• ppelberg added a comment.Aug 5 2020, 4:19 PM
In T259320#6352928, @ppelberg wrote:

I feel there is an open question for @iamjessklein here:

  • How should the Reply Tool look and behave at various widths?

@iamjessklein, adjusting the question above to be: Can you please review the approach @matmarex implemented [i] and comment any adjustments you think should be made? Note: This is something I think you should spend <1 hour on.

The patch can be tried here: http://patchdemo.wmflabs.org/wikis/ad49e514f7553445b7efbaa7de071acb/w/index.php/Talk:Main_Page

i. T259320#6352887

Esanders assigned this task to matmarex.Aug 5 2020, 4:48 PM
matmarex moved this task from Doing to Design Review on the Editing-team (Kanban Board) board.Aug 5 2020, 11:13 PM
• ppelberg moved this task from 📢 To Do to 📐 Doing on the Editing Design board.Aug 10 2020, 3:46 PM
gerritbot added a comment.Aug 10 2020, 10:27 PM

Change 617771 merged by jenkins-bot:
[mediawiki/extensions/DiscussionTools@master] Allow reply widget header and footer to wrap when it's narrow

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

ReleaseTaggerBot added a project: MW-1.36-notes (1.36.0-wmf.4; 2020-08-11).Aug 10 2020, 11:00 PM
Maintenance_bot removed a project: Patch-For-Review.Aug 10 2020, 11:10 PM
• iamjessklein moved this task from 📐 Doing to 📢 To Do on the Editing Design board.Aug 11 2020, 1:12 PM
• ppelberg moved this task from 📢 To Do to 📐 Doing on the Editing Design board.Aug 11 2020, 6:40 PM
• iamjessklein added a comment.Aug 14 2020, 8:06 PM

Nice work @matmarex -

  1. Note that as part of the Edit Summaries feature work the "Watch This Page" checkbox will be under advanced T249391
  2. Similarly there will now be an Advanced link/button that should be left aligned
  3. Basically for mobile, everything should be tightly left aligned and crisp. See this mockup and put any questions back here in the ticket.

mobile.png (466×388 px, 84 KB)

• iamjessklein moved this task from 📐 Doing to 👁Needs Engineering Input on the Editing Design board.Aug 14 2020, 8:06 PM
• ppelberg moved this task from Design Review to Blocked / Needs More Work on the Editing-team (Kanban Board) board.Aug 17 2020, 3:33 AM
JTannerWMF subscribed.Aug 19 2020, 5:09 PM

@ppelberg @iamjessklein we looked at this in Board Refinement, and believe the next step is to break out what Jess identified above and file it away for another time. Otherwise the most recent changes from @matmarex has been merged.

matmarex moved this task from Blocked / Needs More Work to Ready for Sign Off on the Editing-team (Kanban Board) board.Aug 19 2020, 9:00 PM
• ppelberg closed this task as Resolved.Sep 5 2020, 1:03 AM
Restricted Application added a project: User-Ryasmeen. · View Herald TranscriptSep 5 2020, 1:03 AM
gerritbot added a comment.Dec 16 2020, 2:17 PM

Change 649885 had a related patch set uploaded (by Esanders; owner: Esanders):
[mediawiki/extensions/DiscussionTools@master] Follow-up I6f6a869: Apply flex wrapping of actions in anon mode as well

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

gerritbot added a project: Patch-For-Review.Dec 16 2020, 2:17 PM
gerritbot added a comment.Dec 17 2020, 10:59 PM

Change 649885 merged by jenkins-bot:
[mediawiki/extensions/DiscussionTools@master] Follow-up I6f6a869: Apply flex wrapping of actions in anon mode as well

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

ReleaseTaggerBot edited projects, added MW-1.36-notes (1.36.0-wmf.25; 2021-01-05); removed MW-1.36-notes (1.36.0-wmf.4; 2020-08-11).Dec 17 2020, 11:00 PM
Maintenance_bot removed a project: Patch-For-Review.Dec 17 2020, 11:11 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL