Page MenuHomePhabricator

Newcomer tasks: suggested edits module linebreaks
Closed, ResolvedPublicBUG 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.

module_height.gif (804×1 px, 1 MB)


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:

image.png (750×538 px, 98 KB)

Expected Results:
Something like

image.png (179×393 px, 8 KB)

Event Timeline

@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.

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.

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
Screen Shot 2020-09-18 at 11.08.48 AM.png (627×400 px, 58 KB)
Screen Shot 2020-09-18 at 11.14.52 AM.png (441×530 px, 87 KB)

The example below shows the description label occupying two lines:

Screen Shot 2020-09-18 at 11.15.31 AM.png (417×505 px, 57 KB)

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
Screen Shot 2020-09-18 at 11.08.48 AM.png (627×400 px, 58 KB)
Screen Shot 2020-09-18 at 11.14.52 AM.png (441×530 px, 87 KB)

The example below with the description label occupying two lines:

Screen Shot 2020-09-18 at 11.15.31 AM.png (417×505 px, 57 KB)

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

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

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

Reviewed from patch:

Desktop
image.png (568×714 px, 54 KB)
Mobile
image.png (1×772 px, 108 KB)

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

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

Screen Shot 2020-10-14 at 9.47.40 AM.png (411×495 px, 45 KB)

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

Screen Shot 2020-09-18 at 11.08.48 AM.png (627×400 px, 58 KB)

not proposed by @Iniquity
image.png (179×393 px, 8 KB)

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.

image.png (880×1 px, 278 KB)

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

Screen Shot 2020-09-18 at 11.08.48 AM.png (627×400 px, 58 KB)

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.

image.png (880×1 px, 278 KB)

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:

image.png (536×572 px, 40 KB)

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).

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.

image.png (880×1 px, 278 KB)

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:

image.png (536×572 px, 40 KB)

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
Screen Shot 2020-11-04 at 4.28.38 PM.png (439×518 px, 60 KB)
Screen Shot 2020-11-04 at 4.31.06 PM.png (537×742 px, 75 KB)

but the issue is present with a different label:

Screen Shot 2020-11-04 at 4.24.52 PM.png (576×391 px, 56 KB)

Etonkovidova claimed this task.

Re-checked in wmf.7 - the last issue mentioned in the above comment, the label for the "Expand short articles" filter seems to be wrapping without problems.

Screen Shot 2021-06-07 at 6.08.25 PM.png (677×799 px, 137 KB)