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

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)

In T261448#6432310, @kostajh wrote:

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 A	betalabs 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 ?

In T261448#6475422, @Etonkovidova wrote:

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 A	betalabs 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

2. 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}

In T261448#6487077, @kostajh wrote:

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

2. 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!

In T261448#6495502, @Iniquity wrote:

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

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.

In T261448#6549084, @Etonkovidova wrote:

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

In T261448#6559403, @RHo wrote:

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

In T261448#6559791, @kostajh wrote:

In T261448#6559403, @RHo wrote:

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: