Change 552946 had a related patch set uploaded (by Gergő Tisza; owner: Gergő Tisza):
[mediawiki/extensions/GrowthExperiments@master] Suggested edits: style filter buttons toolbar-like on mobile

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

When the modal dialog opens, the whole page can shift left. (Only seems to happen on narrow mobile screens; I saw it in desktop Chrome in mobile emulation mode using iPhone 8.) That's due to rGOJU6a5914dda8f8: Compensate for loss of margin when opening modals and not related to the patch, but it becomes much more jarring now that it affects the button that's being clicked. Not sure what to do about that; it seems like an OOUI bug, but maybe I just don't understand what it is for (or maybe it doesn't affect real mobile devices?).

before click	after click

Change 552946 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Suggested edits: style filter buttons toolbar-like on mobile

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

In T238460#5691928, @Tgr wrote:

When the modal dialog opens, the whole page can shift left. (Only seems to happen on narrow mobile screens; I saw it in desktop Chrome in mobile emulation mode using iPhone 8.) That's due to rGOJU6a5914dda8f8: Compensate for loss of margin when opening modals and not related to the patch, but it becomes much more jarring now that it affects the button that's being clicked. Not sure what to do about that; it seems like an OOUI bug, but maybe I just don't understand what it is for (or maybe it doesn't affect real mobile devices?).

before click	after click

It does affect real mobile devices - I've been observing it on iPhone 6s, where it looks like this:

Before click	After click

I filed it as a separate issue (along with the issue with arrows not fitting the mobile screen) - T239952: Newcomer tasks - Suggested edits card shifted left after difficulty filter button is clicked

For @RHo review:

Before (testwiki)	After (betalabs)

hi @Tgr - a few minor points and this should be good, thanks!

• font-size 16px of the text should be 16px (though this may be addressed through some css changes in task T238280)
• height of the bar should be 48px
• there should be a box-shadow: 0 0 1px 1px rgba(0,0,0,.1);
• the dropdown icon should be about 4px further than it is from the right

Change 556309 had a related patch set uploaded (by Gergő Tisza; owner: Gergő Tisza):
[mediawiki/extensions/GrowthExperiments@master] Fix styling issues with filter button bar

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

Change 556309 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Fix styling issues with filter button bar

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

For Design review - //Note://the mockup has a left-hand arrow to navigate back; the current overlay for a suggested card has 'X'. It was changed in some phab task, as far as I remember, so it look fine to me.

betalabs (with the patch)	current production

Thanks for checking @Etonkovidova - yes the close X instead of back arrow is fine, and this looks good for PM sign-off.