@RHo do you have an example of the hatnote style somewhere else on the site? I want to check if it is something reusable.

vi. Task type element on Mobile and desktop should be right aligned and anchored to the bottom of the ‘card’ “text container”.
vii. Page views stat is shown on the same row as the task type, taking maximum 50% of the flex-box space before text overflows

They do that, showing them in separate rows is flex behavior for when they don't fit on the same line. Do we want to fit them in the same row even at the cost of truncating the text? That's visually nicer but feels less useful to me.

In T255825#6257833, @Tgr wrote:

@RHo do you have an example of the hatnote style somewhere else on the site? I want to check if it is something reusable.

Sorry this should actually be the thumbcaption style which is used on image captions on articles:

Desktop example	Mobile version

vi. Task type element on Mobile and desktop should be right aligned and anchored to the bottom of the ‘card’ “text container”.
vii. Page views stat is shown on the same row as the task type, taking maximum 50% of the flex-box space before text overflows

They do that, showing them in separate rows is flex behavior for when they don't fit on the same line. Do we want to fit them in the same row even at the cost of truncating the text? That's visually nicer but feels less useful to me.

• I think it is worth doing for the nicer visual here since users should now have familiarity with the SE (after having completed a task) to know what the two bits of data refer to even if the text is partially truncated.

Change 608972 had a related patch set uploaded (by Gergő Tisza; owner: Gergő Tisza):
[mediawiki/extensions/GrowthExperiments@master] Newcomer tasks: UI fixes to the text elements on the post-edit dialog

https://gerrit.wikimedia.org/r/c/mediawiki/extensions/GrowthExperiments/ /608972

Change 608972 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Newcomer tasks: UI fixes to the text elements on the post-edit dialog

https://gerrit.wikimedia.org/r/c/mediawiki/extensions/GrowthExperiments/ /608972

Checked in betalabs -

i. "Next suggestion" header
Expected: Header style uses the OOUI Fieldset header style which is font-size:~18.2px on Mobile, and font-size:16px on Desktop

Desktop

betalabs	produciton

Mobile

betalabs	produciton

Seems that on mobile color #36c was in place.

ii. Next suggestion font-color on Desktop
Expected: Should use standard Progressive Button style which is color #36c

	betalabs	production
Desktop
Mobile

iii. Task difficulty text font-size
Expected: Task difficulty text font-style uses the Wikipedia hatnote thumbcaption style which is font-size:13px on Mobile, and font size:12.4px on Desktop

the font size on mobile is 11.5 vs 13 specified.

	betalabs	production
Desktop
Mobile

iv. Icon and text spacing
Expected: Spacing between icon and text (for visits and task type) is 8px

spacing between icon and visits is still 10px.

v. Remove the right and bottom padding from .mw-ge-help-panel-postedit-main .mw-ge-help-panel-postedit-card-text-container

vi. Task type element on Mobile and desktop should be right aligned and anchored to the bottom of the ‘card’ “text container”.

vii. Page views stat is shown on the same row as the task type, taking maximum 50% of the flex-box space before text overflows

.mw-ge-help-panel-postedit-main .mw-ge-help-panel-postedit-card-tasktype {
    flex: 1 0 0;
    justify-self: flex-end;
    text-align: right;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

Moving back so @Tgr can adjust the two minor items (iii) and (iv) that @Etonkovidova found. Thanks both!

In T255825#6276088, @Etonkovidova wrote:

iii. Task difficulty text font-size
Expected: Task difficulty text font-style uses the Wikipedia hatnote thumbcaption style which is font-size:13px on Mobile, and font size:12.4px on Desktop

the font size on mobile is 11.5 vs 13 specified.

	betalabs	production
Desktop
Mobile

In T255825#6276100, @Etonkovidova wrote:

iv. Icon and text spacing
Expected: Spacing between icon and text (for visits and task type) is 8px

spacing between icon and visits is still 10px.

Change 609777 had a related patch set uploaded (by Gergő Tisza; owner: Gergő Tisza):
[mediawiki/extensions/GrowthExperiments@master] Post-edit panel style fixes

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

Change 609777 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Post-edit panel style fixes

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

• the font size on mobile is 13 as specified.

Mobile before fix	Mobile after fix

• spacing between icon and visits is fixed - 8px

iv. Icon and text spacing
Expected: Spacing between icon and text (for visits and task type) is 8px

before fix	after fix

Thanks, LGTM

In T255825#6287651, @Etonkovidova wrote:

• the font size on mobile is 13 as specified.

Mobile before fix	Mobile after fix

• spacing between icon and visits is fixed - 8px

iv. Icon and text spacing
Expected: Spacing between icon and text (for visits and task type) is 8px

before fix	after fix