The attached patch creates the modified version of the onboarding dialog and connects it to the info icon created by T258020: Variant C: Info icon in suggested edits module. It doesn't yet connect it to the popup, because the popup doesn't exist yet (T258009: Variant C/D: welcome popup on desktop is not done yet).

One thing that was confusing while implementing this: the Zeplin mocks show the new image as a 128x128px square, but the actual image asset given in this task is not square. Instead, I decided to set the image's width to 128px, which results in a height of 80px.

Change 626051 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Make the mobile info icon also launch the dialog

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

Some questions for @RHo from @kostajh's code review:

• The mocks use two different images, a square one (128x128px) on desktop and a rectangular one (216x64) on mobile. The difficulty overlay also uses different images for desktop and mobile with these exact same dimensions, so this looks intentional. Could you upload the square 128x128 version? Right now only the 216x64 version is uploaded to the task, so that's what I'm using on desktop for now even though it's wrong.
• Kosta pointed out that the desktop mock for the intro overlay doesn't have a "cancel" button, but the variant A version of the dialog does. I didn't notice this difference and accidentally kept the "cancel" button in the variant C version. Is this difference intentional? Should I remove the cancel button for variant C?
• Kosta pointed out that the desktop mocks for the intro and difficulty overlays show a horizontal line above the footer buttons, as is standard in OOUI. In variant A, we went out of our way to remove this line. Is this an intentional change, and should we bring this line back? If so, is it OK if we bring it back in both variant A and variant C, so as to reduce cosmetic differences between the variants?
• Kosta pointed out that the mobile mocks show the dialog title on mobile as About Suggested edits. He notes that this should probably be About suggested edits (because MediaWiki doesn't do Title Case), but either way, the variant A version has Suggested edits as the dialog title on mobile. Is this an intentional change? And would it be OK to make this change in variant A too, to avoid having to keep two different dialog titles around?

In T258016#6452841, @Catrope wrote:

Some questions for @RHo from @kostajh's code review:

• The mocks use two different images, a square one (128x128px) on desktop and a rectangular one (216x64) on mobile. The difficulty overlay also uses different images for desktop and mobile with these exact same dimensions, so this looks intentional. Could you upload the square 128x128 version? Right now only the 216x64 version is uploaded to the task, so that's what I'm using on desktop for now even though it's wrong.

– Ah yes, I will add to the task description after this comment.

• Kosta pointed out that the desktop mock for the intro overlay doesn't have a "cancel" button, but the variant A version of the dialog does. I didn't notice this difference and accidentally kept the "cancel" button in the variant C version. Is this difference intentional? Should I remove the cancel button for variant C?

– It was intentional to help push users through the onboarding, but on second thoughts it's not good to force users through to the second screen if they are not interested, so I've updated the mock to include a "cancel".

• Kosta pointed out that the desktop mocks for the intro and difficulty overlays show a horizontal line above the footer buttons, as is standard in OOUI. In variant A, we went out of our way to remove this line. Is this an intentional change, and should we bring this line back? If so, is it OK if we bring it back in both variant A and variant C, so as to reduce cosmetic differences between the variants?

– Yes let's bring the line back for variant A as well as C and D.

• Kosta pointed out that the mobile mocks show the dialog title on mobile as About Suggested edits. He notes that this should probably be About suggested edits (because MediaWiki doesn't do Title Case), but either way, the variant A version has Suggested edits as the dialog title on mobile. Is this an intentional change? And would it be OK to make this change in variant A too, to avoid having to keep two different dialog titles around?

– It is intentional to have "About X" so that the user is not confused, especially on mobile, that they are in the Suggested edits module, but rather they in an intro/onboarding screen. I will defer to @MMiller_WMF to confirm on this one, but the reason for capitalising is because we consider the feature name to be "Suggested edits", similar to "Wikipedia".

I've merged the patches but I'll try to summarize here the follow-up issues:

1. Instrumentation, different module names are used for different steps of the start editing dialog (see here)
2. Use different images for desktop/mobile (T258016#6453292)
3. Bring back footer line for variant A/C/D (T258016#6453292)
4. Use "About ..." message with either "Suggested edits" or "suggested edits" (T258016#6453292)
5. The first step of the dialog should probably have a minimum height on desktop, which would be the same as the height of the second step. As it is, you press "continue" and then have to move the mouse to click "Done".

Change 626050 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Display without topic selector in variant C

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

Change 626051 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Make the mobile info icon also launch the dialog

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

Change 626795 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Various fixes for variant C onboarding

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

In T258016#6453292, @RHo wrote:

In T258016#6452841, @Catrope wrote:

Some questions for @RHo from @kostajh's code review:

• The mocks use two different images, a square one (128x128px) on desktop and a rectangular one (216x64) on mobile. The difficulty overlay also uses different images for desktop and mobile with these exact same dimensions, so this looks intentional. Could you upload the square 128x128 version? Right now only the 216x64 version is uploaded to the task, so that's what I'm using on desktop for now even though it's wrong.

– Ah yes, I will add to the task description after this comment.

Thanks! Fixed in my latest patch.

• Kosta pointed out that the desktop mock for the intro overlay doesn't have a "cancel" button, but the variant A version of the dialog does. I didn't notice this difference and accidentally kept the "cancel" button in the variant C version. Is this difference intentional? Should I remove the cancel button for variant C?

– It was intentional to help push users through the onboarding, but on second thoughts it's not good to force users through to the second screen if they are not interested, so I've updated the mock to include a "cancel".

OK, that's easy for me then, because it's already implemented that way :)

• Kosta pointed out that the desktop mocks for the intro and difficulty overlays show a horizontal line above the footer buttons, as is standard in OOUI. In variant A, we went out of our way to remove this line. Is this an intentional change, and should we bring this line back? If so, is it OK if we bring it back in both variant A and variant C, so as to reduce cosmetic differences between the variants?

– Yes let's bring the line back for variant A as well as C and D.

Done in my latest patch

• Kosta pointed out that the mobile mocks show the dialog title on mobile as About Suggested edits. He notes that this should probably be About suggested edits (because MediaWiki doesn't do Title Case), but either way, the variant A version has Suggested edits as the dialog title on mobile. Is this an intentional change? And would it be OK to make this change in variant A too, to avoid having to keep two different dialog titles around?

– It is intentional to have "About X" so that the user is not confused, especially on mobile, that they are in the Suggested edits module, but rather they in an intro/onboarding screen. I will defer to @MMiller_WMF to confirm on this one, but the reason for capitalising is because we consider the feature name to be "Suggested edits", similar to "Wikipedia".

OK, that makes sense. Should we make this change only for variant C/D, or also for the existing dialog in variant A?

In T258016#6453509, @kostajh wrote:

I've merged the patches but I'll try to summarize here the follow-up issues:

1. Instrumentation, different module names are used for different steps of the start editing dialog (see here)

Let's deal with this as part of T262485: Variant C/D: instrumentation

2. Use different images for desktop/mobile (T258016#6453292)

Done in my latest patch

3. Bring back footer line for variant A/C/D (T258016#6453292)

Done in my latest patch

4. Use "About ..." message with either "Suggested edits" or "suggested edits" (T258016#6453292)

Waiting for Marshall/Rita to confirm the exact text and whether it should apply to variant A as well (which I'd prefer, it'd be easier)

5. The first step of the dialog should probably have a minimum height on desktop, which would be the same as the height of the second step. As it is, you press "continue" and then have to move the mouse to click "Done".

Fixed in my latest patch, although with a custom getBodyHeight() implementation rather than a min-height.

@Catrope @kostajh @RHo

4. Use "About ..." message with either "Suggested edits" or "suggested edits" (T258016#6453292)

Waiting for Marshall/Rita to confirm the exact text and whether it should apply to variant A as well (which I'd prefer, it'd be easier)

"Suggested edits" should not be capitalize, unless it's at the beginning of a sentence. Therefore, it should be "About suggested edits". My reasoning is that it looks like a typo because the first word is capitalized and not the second. And I think that capitalizing both word ("Suggested Edits"), makes it look like a trademarked brand, which I don't think fits our tone.

And yes, @Catrope, it is fine to apply it to Variant A.

Change 626795 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Various fixes for variant C onboarding

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

Change 627576 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Change header text

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

Change 627576 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Change header text

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

Checked in betalabs.
(1) They can dismiss the overlay by clicking away.

• the spec is not in place - with the popup everything else becomes inactive.

(2) Done - no capitalization of Suggested edits in the title on mobile or in the tooltip

"Suggested edits" should not be capitalize, unless it's at the beginning of a sentence. Therefore, it should be "About suggested edits".

(3) Done - see the animated gif below.

In T258016#6455814, @Catrope wrote:

5. The first step of the dialog should probably have a minimum height on desktop, which would be the same as the height of the second step. As it is, you press "continue" and then have to move the mouse to click "Done".

Fixed in my latest patch, although with a custom getBodyHeight() implementation rather than a min-height.

The screenshots for review.
Desktop

Note: The size of the popup seems bigger than in the mockup .
<div class="oo-ui-window-frame" style="transition: all 0.25s ease-out 0s; width: 700px; height: 512px;">

e.g. with width: 600px;:

Mobile

Adding the custom messages reflecting Welcome survey responses.

Welcome survey response	Onboarding message
To fix a typo or error in a Wikipedia article
To add or change information to a Wikipedia article
To add a photo or image to a Wikipedia article
To create a new Wikipedia article
I'm participating in a program, class, or event; To read Wikipedia; Other

In T258016#6432804, @RHo wrote:

Hi @Catrope - Can we continue to vary based on WelcomeSurvey responses for this onboarding, BUT when a user clicks on the "?" icon in the initiated module header, we always show the single general icon and text for everyone?

@MMiller_WMF to confirm but I am asking on the assumption we would want the same customized onboarding for var C & D, and at the same time not have the help "?" in the SE module header be customized (since a user may not look at that message until much later)

I've split this out to a leftover task: T263608: Variant C: don't personalize onboarding dialog when accessed from info icon

Hi @Catrope please see comments on a couple of design tweaks needed below, along with same question @Etonkovidova asked about Desktop pop-up width.

In T258016#6475976, @Etonkovidova wrote:

Mobile

• The Suggested edits image should only be 64x64px:
  
• The body text ("Wikipedia is built by..." and "Use topics to get...") should be small font size than the headers. It should use the 14.8px size that is from the style OOUI Mobile/Smaller UI text/Inline-help.
• There should be 8px padding above the body text and the header (across both onboarding screens):
  

*There should be 16px padding on the RHS - on the second onboarding some of the text looks like it is a bit close to the right edge

In T258016#6475975, @Etonkovidova wrote:

The screenshots for review.
Desktop

• Can the body text style in the first onboarding screen under Filter by topic" use the same line-height as the body text under "Suggested edits to get started"? At the moment it's looking a tad tight.

*All the text on the second onboarding screen should be left aligned. At the moment the top text section "Try some..." is a bit more indented left than the Easy, Med, Hard descriptions below.

Note: The size of the popup seems bigger than in the mockup .
<div class="oo-ui-window-frame" style="transition: all 0.25s ease-out 0s; width: 700px; height: 512px;">

e.g. with width: 600px;:

Is this something that is automatically set due to the page width? If so that's fine, else it would be preferable to change to the *640px* width in the mocks please!

Change 632602 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Styling tweaks

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

In T258016#6495190, @RHo wrote:

• The Suggested edits image should only be 64x64px:
  

This has already been fixed since your comment.

• The body text ("Wikipedia is built by..." and "Use topics to get...") should be small font size than the headers. It should use the 14.8px size that is from the style OOUI Mobile/Smaller UI text/Inline-help.

What we have now is that the headers ("Suggested edits to get started", "Filter by topic") are a larger font size (18.28px) and the body texts are the base font size (16px). I think we might have done that as part of your big font size overhaul. Is that OK, or should the body text still be 14.8px for a larger font size difference?

• There should be 8px padding above the body text and the header (across both onboarding screens):
  

Fixed in my latest patch.

*There should be 16px padding on the RHS - on the second onboarding some of the text looks like it is a bit close to the right edge

There already is 16px padding (or margin) on the left+right hand sides in both panels, although it's 24px on the intro panel and 1em (=16px) on the difficulty panel for some reason. This appears to have been done deliberately, and only on mobile (on desktop both panels have 24px left+right side padding). If you want me to remove this odd exception and make it 24px everywhere, I would be more than happy to do that.

• Can the body text style in the first onboarding screen under Filter by topic" use the same line-height as the body text under "Suggested edits to get started"? At the moment it's looking a tad tight.

Done in my latest patch.

*All the text on the second onboarding screen should be left aligned. At the moment the top text section "Try some..." is a bit more indented left than the Easy, Med, Hard descriptions below.

Those are not explicitly aligned and have never been. Aligning them wasn't too hard though, so I've done it in my patch.

Is this something that is automatically set due to the page width? If so that's fine, else it would be preferable to change to the *640px* width in the mocks please!

OOUI has standard dialog widths that you can choose from, including "medium" (500px) and "large" (700px). But setting a custom size wasn't too hard, so I've done that in my patch.

In T258016#6523984, @Catrope wrote:

In T258016#6495190, @RHo wrote:

• The body text ("Wikipedia is built by..." and "Use topics to get...") should be small font size than the headers. It should use the 14.8px size that is from the style OOUI Mobile/Smaller UI text/Inline-help.

What we have now is that the headers ("Suggested edits to get started", "Filter by topic") are a larger font size (18.28px) and the body texts are the base font size (16px). I think we might have done that as part of your big font size overhaul. Is that OK, or should the body text still be 14.8px for a larger font size difference?

You're right, the body text for this is now 16px on Mobile after the font style overhaul.

*There should be 16px padding on the RHS - on the second onboarding some of the text looks like it is a bit close to the right edge

There already is 16px padding (or margin) on the left+right hand sides in both panels, although it's 24px on the intro panel and 1em (=16px) on the difficulty panel for some reason. This appears to have been done deliberately, and only on mobile (on desktop both panels have 24px left+right side padding). If you want me to remove this odd exception and make it 24px everywhere, I would be more than happy to do that.

Yes, but can we make it so that on Mobile there is 1em (16px) padding on left and right everywhere?

*All the text on the second onboarding screen should be left aligned. At the moment the top text section "Try some..." is a bit more indented left than the Easy, Med, Hard descriptions below.

Those are not explicitly aligned and have never been. Aligning them wasn't too hard though, so I've done it in my patch.

Thank you 😬

Is this something that is automatically set due to the page width? If so that's fine, else it would be preferable to change to the *640px* width in the mocks please!

OOUI has standard dialog widths that you can choose from, including "medium" (500px) and "large" (700px). But setting a custom size wasn't too hard, so I've done that in my patch.

Thank you 😬

Change 632602 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Styling tweaks

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

Change 633186 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Create StartEditing RL module, apply consistent side padding

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

Previous patch merged, new patch in code review for this comment:

Yes, but can we make it so that on Mobile there is 1em (16px) padding on left and right everywhere?

Also, the previous patch causes an issue noted here https://gerrit.wikimedia.org/r/c/mediawiki/extensions/GrowthExperiments/+/632602/4/modules/homepage/ext.growthExperiments.Homepage.StartEditingDialog.less#22, either @Catrope or I will fix that soon.

Change 633240 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Use explicit margins instead of un-reset

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

Change 633240 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Use explicit margins instead of un-reset

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

Left and right padding is fixed per patch https://gerrit.wikimedia.org/r/c/mediawiki/extensions/GrowthExperiments/+/633186

Var C	Desktop step 1	step 2	Mobile step 1	Mobile step 2
Var D	Desktop step 1	step 2	Mobile step 1	Mobile step 2

Change 633186 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] StartEditing: Set left/right padding to 16px for desktop/mobile

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

Checked in testwiki wmf.13- the style adjustments are also applied to the intro overlays in variant A. The latest patch - Set left/right padding to 16px for desktop/mobile is in place; just like the screenshots in @RHo comment above.

The screenshot below are just for a general overview (and, in case of variant C, comparison with A)

variant C (comparing to variant A on cswiki)

	wmf.13	cswiki
Desktop step 1
Desktop step 2
Mobile step 1
Mobile step 2

variant D

	betalabs
Desktop step 1
Desktop step 2
Mobile step 1
Mobile step 2

Looking at var C only per this task, some items still to be fixed (or were maybe reverted at some point?):

Screen(s)	Actual	Expected	Details
Desktop step 1 and 2	and { }		Bottom padding in the desktop module intro area should only be 24px (not 35px) - and should include the bottom of the graphic
Mobile step 1			Image should only be 64x64px
Mobile step 1			The title is vertically centered with the graphic, the topic message text should be below the title and graphic.
Mobile step 2			Level icon and text should be vertically centered

Looking at var C only per this task, some items still to be fixed (or were maybe reverted at some point?):

All these screenshots are from variant A though (as you can tell by the presence of the start module in the background, and the topic filters below the intro section.

Bottom padding in the desktop module intro area should only be 24px (not 35px) - and should include the bottom of the graphic

My patch changes the CSS so that the image is part of the height of the intro area (it previously wasn't, as you pointed out), and reduces the padding to 24px (down from 35px on desktop, 40px on mobile). However, similar to my comments at T258017#6549150, the Zeplin mocks show a 24px bottom padding on desktop but 16px on mobile. For now, I'm making it 24px on both, but if the lower padding on mobile is intended, I can change that. There are several other instances of this, as I point out in that comment.

Level icon and text should be vertically centered

Fixed in my patch. I had already done this for the task type selector, but I forgot that what's displayed in the variant C onboarding isn't a task type selector but the generic difficulty explanation (without checkboxes), so my earlier fix didn't apply there. The font size was also wrong there, I fixed that too.

Image should only be 64x64px

It is, in variant C (mobile only) and D (desktop and mobile). You're looking at variant A, where it's expected that the image is still 128x128px (as it is in variant C on desktop, as well, per the Zeplin mocks).

The title is vertically centered with the graphic, the topic message text should be below the title and graphic.

I can do that, but it looks a bit odd for me locally, because the text is on one line for me:

Change 634596 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Styling tweaks for variant C

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

Change 634597 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Center intro text next to image in variant C/D on mobile

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

Change 634755 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Make image in difficulty banner top aligned, fix padding

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

While working on the big 24px->16px change mentioned in T258019#6557184, I noticed that the text in the difficulty banner in the variant C onboarding dialog was vertically centered on desktop, but should instead be top-aligned according to the mocks. The attached patch fixes that in both variant A and variant C.

In T258016#6556575, @Catrope wrote:

Looking at var C only per this task, some items still to be fixed (or were maybe reverted at some point?):

All these screenshots are from variant A though (as you can tell by the presence of the start module in the background, and the topic filters below the intro section.

Sorry, I was going off of the screenshots from T258016#6544922 as var C. Incidentally it looks like the console commands to change the variant and initiated state are no longer working for me.

Bottom padding in the desktop module intro area should only be 24px (not 35px) - and should include the bottom of the graphic

My patch changes the CSS so that the image is part of the height of the intro area (it previously wasn't, as you pointed out), and reduces the padding to 24px (down from 35px on desktop, 40px on mobile). However, similar to my comments at T258017#6549150, the Zeplin mocks show a 24px bottom padding on desktop but 16px on mobile. For now, I'm making it 24px on both, but if the lower padding on mobile is intended, I can change that. There are several other instances of this, as I point out in that comment.

Got it thanks, I have update the Zeplin for mobile, as it was indeed inconsistently applied.

Level icon and text should be vertically centered

Fixed in my patch. I had already done this for the task type selector, but I forgot that what's displayed in the variant C onboarding isn't a task type selector but the generic difficulty explanation (without checkboxes), so my earlier fix didn't apply there. The font size was also wrong there, I fixed that too.

OK cool.

Image should only be 64x64px

It is, in variant C (mobile only) and D (desktop and mobile). You're looking at variant A, where it's expected that the image is still 128x128px (as it is in variant C on desktop, as well, per the Zeplin mocks).

OK that's fine. Though FWIW on variant A mobile the image should also be 64x64px (see Zeplin from that era http://zpl.io/VQdAxw4) , but think we just missed this in testing back then.

The title is vertically centered with the graphic, the topic message text should be below the title and graphic.

I can do that, but it looks a bit odd for me locally, because the text is on one line for me:

I think this is mitigated with the 16px between the intro and the message:

Since this looks a bit odd, and involves non-trivial code changes, I've separated it into its own patch. I've also only implemented it on mobile, because it wouldn't look good on desktop. I also haven't implemented it in variant A, because it wouldn't look good there either because the image is so much larger:

Per my comment above about variant A mobile also being 64x64px, could we make the same changes across the board?

Change 634596 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Styling tweaks for variant C/D

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

Change 634755 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Make image in difficulty banner top aligned, fix padding

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

One patch remains, waiting for feedback from @RHo.

I'm being a bit silly here: I just removed variant A, so it doesn't make sense for me to complain that something doesn't look good in it. I've also added the 16px bottom padding so it looks better:

However, I'm still doing this on mobile only for now, because this is what it would look like on desktop:

Current	What it would look like

And it seems to be that the one on the left matches the Zeplin mocks better than the one on the right.

Change 634597 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Center intro text next to image on mobile

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

Change 635904 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Use smaller padding for mobile in various places

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

In T258016#6573344, @gerritbot wrote:

Change 635904 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Use smaller padding for mobile in various places

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

This reduces the top and bottom padding on the topic description div to 16px on mobile (keeping 24px on desktop), to match the Zeplin mocks.

Change 635904 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Use smaller padding for mobile in various places

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

For C variant.

Expected	Details	Betalabs after fix(es)
Desktop	Bottom padding in the desktop module intro area should only be 24px (not 35px) - and should include the bottom of the graphic
Mobile	Image should only be 64x64px
Mobile	The title is vertically centered with the graphic, the topic message text should be below the title and graphic.
Mobile	Level icon and text should be vertically centered

Check once more and only 1 of the issues is not quite fixed.

	Expected description	Actual
	Bottom padding in the desktop module intro area should only be 24px (not 35px) - and should include the bottom of the graphic
	Mobile Image should only be 64x64px
	The title is vertically centered with the graphic, the topic message text should be below the title and graphic.	{F33890525}Title is not quite vertically centered (I think this is caused by the margin-bottom:0.5em on the class .mw-ge-startediting-dialog-intro-topic-title
	Level icon and text should be vertically centered

Additionally the same unexpected wrapping of the intro text has been captured on leftovers task T267569.

Change 643129 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Actually vertically center intro-topic-title

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

Change 643129 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] StartEditingDialog: Actually vertically center intro-topic-title

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

For Design review - the last patch is for the following issue:

	The title is vertically centered with the graphic, the topic message text should be below the title and graphic.	Title is not quite vertically centered (I think this is caused by the margin-bottom:0.5em on the class .mw-ge-startediting-dialog-intro-topic-title

Checked on betalabs:

body.growthexperiments-homepage-mobile-summary .mw-ge-startediting-dialog-intro-topic-imageWrapper .mw-ge-startediting-dialog-intro-topic-title {
    flex-grow: 1;
    margin-bottom: 0;
}

For a wider mobile screen:

thanks @Etonkovidova, last item looks good