Page MenuHomePhabricator

Newcomer tasks: suggested edits module linebreaks
Open, Needs TriagePublicBUG REPORT

Description

Beyond looking strange, this issue may exacerbate the issue described in the parent task, T237482: Newcomer tasks: module height changes. If a user is flipping through a queue with multiple task types, and one type has wrapped lines, the module's height will change. This will be especially noticeable in Variants C and D on desktop. See the gif below of Variant C and D in development on beta.


Originally description by @Iniquity:

The labels of the suggested edit breaks if the line is very long. Look at help and level marks.

Actual Results:

Expected Results:
Something like

Event Timeline

Iniquity created this task.Aug 27 2020, 7:35 PM

@Etonkovidova -- do you know if we already have a task about this? How the "i" icon and difficulty label can wrap to the next line?

@MMiller_WMF - the issue looks familiar but I could not find any direct references to it in the phabricator.

MMiller_WMF renamed this task from The labels of the suggested edit breaks if the line is very long in Russian language to Newcomer tasks: suggested edits module linebreaks.Sep 2 2020, 11:48 PM
MMiller_WMF updated the task description. (Show Details)
MMiller_WMF added a subscriber: RHo.
MMiller_WMF updated the task description. (Show Details)
kostajh added a subscriber: kostajh.Sep 3 2020, 7:52 AM

I imagine this problem will go away once we do this part of T258704: Variant C/D: homepage Suggested edits module changes - Desktop:

C. Move difficulty indicator 'ribbon' below the task heading (as per guidance panel)

I imagine this problem will go away once we do this part of T258704: Variant C/D: homepage Suggested edits module changes - Desktop:

C. Move difficulty indicator 'ribbon' below the task heading (as per guidance panel)

That patch is merged so I'm moving this into QA.

Etonkovidova moved this task from QA to Design Review on the Growth-Team (Current Sprint) board.EditedSep 18 2020, 8:09 PM

Moving for Design review - to decide if the issue require some additional work.
Checked in betalabs - it doesn't seem to fix the particular problem when the task description occupies more than one line. The info icon insists on being on a new line if the description is spanned on several lines (it's also the case for variants C/D).

Logically the info button belongs to the difficulty level (Easy, Medium, Hard) so it makes sense to tie the icon to such labels.

betalabs Variant Abetalabs Variant C/D

The example below shows the description label occupying two lines:

Thanks @Etonkovidova - I actually don't consider the line wrapping of the different task types under the article cards to be a bug, but agree that the info icon should be on the same line as the final line of the task type label. Would this be relatively quick to fix @kostajh ?

Moving for Design review - to decide if the issue require some additional work.
Checked in betalabs - it doesn't seem to fix the particular problem when the task description occupies more than one line. The info icon insists on being on a new line if the description is spanned on several lines (it's also the case for variants C/D).

Logically the info button belongs to the difficulty level (Easy, Medium, Hard) so it makes sense to tie the icon to such labels.

betalabs Variant Abetalabs Variant C/D

The example below with the description label occupying two lines:

hi, just to clarify:

Logically the info button belongs to the difficulty level (Easy, Medium, Hard) so it makes sense to tie the icon to such labels.
but agree that the info icon should be on the same line as the final line of the task type label

It sounds like there are two different proposals here:

  1. Move the info button to the second row, to the right of Easy / 5-10 Minutes

or

  1. If the task type label extends to two lines, ensure that the info icon is on the second line

e.g.

Some long task 
label {infoIcon}

Instead of what is seen in the screenshot:

Some long task
label
{infoIcon}

@RHo could you please clarify which one you'd like to have implemented? Thanks!

Iniquity added a comment.EditedSep 25 2020, 10:19 PM

It seems to me that the information button does not refer to the difficulty level, it refers to the description of the task. That is, there should be

Some long task {infoIcon}
label

and

Some long {infoIcon}
task 
label
RHo added a comment.Sep 25 2020, 10:50 PM

Yes to clarify, I am saying that the info icon belongs with the task type. If the task description wraps to a second line, the icon should be at the end of the task type, still on the second line.

Some long task type that
goes to a second line {info icon}
{DIFFICULTY LABEL}

hi, just to clarify:

Logically the info button belongs to the difficulty level (Easy, Medium, Hard) so it makes sense to tie the icon to such labels.
but agree that the info icon should be on the same line as the final line of the task type label

It sounds like there are two different proposals here:

  1. Move the info button to the second row, to the right of Easy / 5-10 Minutes

or

  1. If the task type label extends to two lines, ensure that the info icon is on the second line

e.g.

Some long task 
label {infoIcon}

Instead of what is seen in the screenshot:

Some long task
label
{infoIcon}

@RHo could you please clarify which one you'd like to have implemented? Thanks!

It seems to me that the information button does not refer to the difficulty level, it refers to the description of the task. That is, there should be

Some long task {infoIcon}
label

and

Some long {infoIcon}
task 
label
kostajh claimed this task.Sep 28 2020, 5:25 PM
kostajh moved this task from Needs More Work to In Progress on the Growth-Team (Current Sprint) board.

Change 633530 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] TaskExplanation: Display info icon inline

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

RHo added a comment.EditedOct 12 2020, 7:25 PM

Reviewed from patch:

Desktop
Mobile

info icon is fine on both desktop and mobile

Change 633530 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] TaskExplanation: Display info icon inline

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

Etonkovidova closed this task as Resolved.Oct 14 2020, 4:48 PM

Checked in production testwiki wmf.13 (will check additionally in group2).

Etonkovidova reopened this task as Open.EditedOct 16 2020, 12:41 AM
Etonkovidova moved this task from QA to Needs More Work on the Growth-Team (Current Sprint) board.

Re-opening it and moving to Needs more work just for evaluation.
There seems to be a special case on ruwiki wmf.13 - the label does not occupy two lines, yet there is not enough space to accommodate the info icon which is pushed on the next line.

So, we still have the following case


not proposed by @Iniquity

Moving to Design Review so @RHo can assess what, if anything, we should do about this issue.

Thanks for catching this @Etonkovidova, can we move the icon span to be nested under the task text so that it always wraps with the last word? I think this is what we did with the user avatar icon and user name in the welcome banners.

Re-opening it and moving to Needs more work just for evaluation.
There seems to be a special case on ruwiki wmf.13 - the label does not occupy two line, but it's long enough so the info icon does not have enough space.

So, we still have the following case

Thanks for catching this @Etonkovidova, can we move the icon span to be nested under the task text so that it always wraps with the last word? I think this is what we did with the user avatar icon and user name in the welcome banners.

Not easily (unless I've missed something) because of HTML + JS needed to render the popup on click/hover over the icon.

A very easy fix is to swap the icon / label order:

That would also have the benefit of being consistent with how PopupButtonWidgets are rendered elsewhere in MediaWiki when configured with icon + visible label text (icon first, then label).

RHo added a comment.Oct 19 2020, 10:50 AM

Thanks for catching this @Etonkovidova, can we move the icon span to be nested under the task text so that it always wraps with the last word? I think this is what we did with the user avatar icon and user name in the welcome banners.

Not easily (unless I've missed something) because of HTML + JS needed to render the popup on click/hover over the icon.

A very easy fix is to swap the icon / label order:

That would also have the benefit of being consistent with how PopupButtonWidgets are rendered elsewhere in MediaWiki when configured with icon + visible label text (icon first, then label).

Hmm, I think I would prefer the case where the rare occasion the icon is orphaned on its own line than this behavior. @MMiller_WMF - shall I create a #leftovers task for this?

Re-checked in ruwiki wmf.14

If a user is flipping through a queue with multiple task types, and one type has wrapped lines, the module's height will change. This will be especially noticeable in Variants C and D on desktop. See the gif below of Variant C and D in development on beta.

The module height is not changing now

The labels of the suggested edit breaks if the line is very long. Look at help and level marks.

  • that particular filter description label does not cause wrapping issues anymore

but the issue is present with a different label: