@kostajh -- do you think we should consider this a blocker for guidance? Should we have it in Ready for Development?

@Catrope plans to start working on this today.

Change 598902 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] Suggested edits: make tips area scrollable without footer overlap

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

Change 598902 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Suggested edits: make tips area scrollable without footer overlap

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

Change 599108 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] Guidance: Move scrollability to the tip content itself

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

In T253678#6170505, @gerritbot wrote:

Change 599108 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] Guidance: Move scrollability to the tip content itself

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

This patch changes what the scrollable container is to something that I think makes more sense, but I'm also interested in @RHo's opinion about this. The easiest way to explain what it does is to show it:

	Before	After
Scrolled up
Scrolled down

Moving to Design review - the scrolling works fine (checked in mobile too); there are two issues described below. Please review them; they do not seem to be blockers and may be filed as separate issues (if needed).

(1) When
<mark class="negative"> is present, the scrolling will never display the end of the block "growthexperiments-quickstart-tips-tip-example-text" and the white space that is supposed to be displayed after the block:

additional text in the example	additional text above the example text	present display

Note: If some additional text is placed after "growthexperiments-quickstart-tips-tip-example-text" - no scrolling problems are present.

(2) On mobile for Easy difficulty level Step 2 an icon is displayed - <img class="growthexperiments-quickstart-tips-tip growthexperiments-quickstart-tips-tip-graphic" src="/w/extensions/GrowthExperiments/images/intro-typo-ltr.svg" alt="">- that seems out of place and it's not displayed on the Desktop. I checked all others tips steps for all difficulty layers and I did not see any icons.

Desktop	mobile

(3) Mobile - if the footer has more than one line, the text gets squished - it happens only with English text. The screenshot below is done on a real device - iPhone 6s.

(2) On mobile for Easy difficulty level Step 2 an icon is displayed - <img class="growthexperiments-quickstart-tips-tip growthexperiments-quickstart-tips-tip-graphic" src="/w/extensions/GrowthExperiments/images/intro-typo-ltr.svg" alt="">- that seems out of place and it's not displayed on the Desktop. I checked all others tips steps for all difficulty layers and I did not see any icons.

Hmm, that's strange. I see it on both mobile and desktop. Are you able to reproduce it reliably?

hi @Catrope @kostajh - I actually think the whole inner section of the panel between the header and footer scrollable, ie the magenta highlighted area in the following screenshot:

This would be better particularly on mobile, where especially on smaller screens it would be very hard to see much content in the tips if the header section is not able to be scrolled.

In T253678#6174150, @RHo wrote:

hi @Catrope @kostajh - I actually think the whole inner section of the panel between the header and footer scrollable, ie the magenta highlighted area in the following screenshot:

This would be better particularly on mobile, where especially on smaller screens it would be very hard to see much content in the tips if the header section is not able to be scrolled.

@RHo that inner section is already scrollable (@Catrope's patch would change it to be just the quick start content area). Or are you seeing different behavior?

In T253678#6175849, @kostajh wrote:

In T253678#6174150, @RHo wrote:

hi @Catrope @kostajh - I actually think the whole inner section of the panel between the header and footer scrollable, ie the magenta highlighted area in the following screenshot:

This would be better particularly on mobile, where especially on smaller screens it would be very hard to see much content in the tips if the header section is not able to be scrolled.

@RHo that inner section is already scrollable (@Catrope's patch would change it to be just the quick start content area). Or are you seeing different behavior?

Yes, I mean that we should not change it to just limit it to be the quick start content area.

To rephrase what I think @RHo is saying: the entire contents of the panel should be scrollable, not just the tips. Right?

In T253678#6178465, @MMiller_WMF wrote:

To rephrase what I think @RHo is saying: the entire contents of the panel should be scrollable, not just the tips. Right?

Yes thanks, except for the header and footer (so as it was before this ticket).

OK, so the change compared to current master is that the top area (with the task type information on a light blue background) should also be part of the scrollable area. I'll make that change.

Change 599108 abandoned by Catrope:
Guidance: Move scrollability to the tip content itself

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

Change 600414 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] Suggested edits: Make header+tips scrollable together

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

With my patch:

Scrolled up	Scrolled down

@Catrope -- thanks for working on this. Should this be in Code Review?

Change 600414 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Suggested edits: Make header+tips scrollable together

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

In T253678#6173731, @kostajh wrote:

(2) On mobile for Easy difficulty level Step 2 an icon is displayed - <img class="growthexperiments-quickstart-tips-tip growthexperiments-quickstart-tips-tip-graphic" src="/w/extensions/GrowthExperiments/images/intro-typo-ltr.svg" alt="">- that seems out of place and it's not displayed on the Desktop. I checked all others tips steps for all difficulty layers and I did not see any icons.

Hmm, that's strange. I see it on both mobile and desktop. Are you able to reproduce it reliably?

Yes, the image is present on Desktop too. @kostajh - so, the image represents something useful?

@Etonkovidova it's intentional per row F9 in https://docs.google.com/spreadsheets/d/1qrFFQ1TbNUwn_Efwj9TB4uurv_HyksHKnXn9gH3ppew/edit, it's just a decorative image.

Checked https://gerrit.wikimedia.org/r/600414 in both desktop and mobile.
Here is an animated gif and a screen recording from mobile:

	vs

In T253678#6191118, @Etonkovidova wrote:

Note: - @RHo - do you think it needs to be filed as a separate bug?

Hi @Etonkovidova - do you mean the scrollbar being visible? I think that is fine as it depends on the browser.
However, is the visual bug in the mp4 where there is a white background shown above and below the "Suggested edits" header still occurring on the iPhone?

Interesting that the bug that I mentioned in (1) of this comment is not visible the gif above.
Here is an additional screenshot to illustrate (1) of this comment. The vertical size of the "growthexperiments-quickstart-tips-tip-example-text" will increase.

	vs

This will be resolved when padding 16px is added below this content element as noted on point [v] of task T254527.