Article image should be flush to the left and right edges of the card.

It usually is. Maybe the reason it's not in your screenshot might be that the Claude Monet image is unusually portrait-y? But even then this should be working. Where is this screenshot from? I'm confused that you get an English-language Claude Monet suggestion, because that doesn't seem like it would happen on any of the wikis we have deployed this code to, not even in beta labs.

Change 550988 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] SuggestedEditCardWidget: Layout tweaks

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

My attached patch makes the following changes; @RHo could you please confirm that this is what you want?

Height of the module is taller than expected, mainly due to a taller image, larger font-size of the article title, and an extra (4th) line in the text extract.

Fixed in the attached patch: made the image less tall (140->128px), the text part less tall (also 140->128px), and reduced the extract from 4 lines to 3. This also required rescaling the placeholder image SVG from 260x150 to 260x128. (@RHo this is the part that makes me unsure: the Zeplin mocks show the image area as 264x128, but the placeholder image SVG in the assets task is 260x150; I rescaled it to be 128px tall, but because of the inconsistency I wanted to ask)

Space between filter and number of suggestions should be increased.

Changed from 10px to 24px.

Space between task type and bottom of the article card should be increased.
Space between bottom of the task type description and card footer should be decreased.

Changed both of these (they're the top and bottom padding on the same element) from 10px to 24px.

In T238282#5665939, @Catrope wrote:

Height of the module is taller than expected, mainly due to a taller image, larger font-size of the article title, and an extra (4th) line in the text extract.

Fixed in the attached patch: made the image less tall (140->128px), the text part less tall (also 140->128px), and reduced the extract from 4 lines to 3. This also required rescaling the placeholder image SVG from 260x150 to 260x128. (@RHo this is the part that makes me unsure: the Zeplin mocks show the image area as 264x128, but the placeholder image SVG in the assets task is 260x150; I rescaled it to be 128px tall, but because of the inconsistency I wanted to ask)

• Sorry I made this on request and and did not check the dimensions, but have now created a placeholder image with height 128px (SVG and PNG@4x)
  • And actually, the card is meant to be responsive according to the width of the module container (the width of the mobile mocks and Desktop is different). I should have made this clearer from the start, but could we in a future iteration make this responsive? Eg. if width of the module ≥ 600px, the card dimensions increase with image size at 520x256px.
• Finally, I wonder if we can make changes to the se-image class so that it uses the background-color #EAECF0 instead and have the image-icon centered (no repeat) rather than using a specifically-sized placeholder graphic.

.se-image
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zd…%0D%0AMjUuODMsMTVsMTAuNSwxNy41WiIgc3R5bGU9ImZpbGw6I2EyYTliMSIvPjwvc3ZnPg==);
  background-color: #eaecf0!important;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 40px 40px;

Will comment separately regarding the other updates.

In T238282#5665937, @gerritbot wrote:

Change 550988 had a related patch set uploaded (by Catrope; owner: Catrope):
[mediawiki/extensions/GrowthExperiments@master] SuggestedEditCardWidget: Layout tweaks

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

Patch LGTM!

Change 550988 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] SuggestedEditCardWidget: Layout tweaks

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

hi @Catrope - here's the icon-only image icon for the placeholder as a SVG data uri:

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0MCA0%0D%0AMCI+PHRpdGxlPnBsYWNlaG9sZGVyLWljb24tb25seTwvdGl0bGU+PHBhdGggZD0iTTM2LDBINEMx%0D%0ALjc5LDAsMCwyLjI0LDAsNVYzNWMwLDIuNzYsMS43OSw1LDQsNUgzNmMyLjIxLDAsNC0yLjI0LDQt%0D%0ANVY1QzQwLDIuMjQsMzguMjEsMCwzNiwwWk0zLjY3LDMyLjVsOC4xNi0xMy4xMiw1Ljg0LDguNzZM%0D%0AMjUuODMsMTVsMTAuNSwxNy41WiIgc3R5bGU9ImZpbGw6I2EyYTliMSIvPjwvc3ZnPg==

Else have also uploaded the SVG F31098850 and PNG@4x F31098844.

I'll file make the suggested edit card responsive part of my comment as a post-V1.0 task.

In T238282#5666593, @RHo wrote:

• Finally, I wonder if we can make changes to the se-image class so that it uses the background-color #EAECF0 instead and have the image-icon centered (no repeat) rather than using a specifically-sized placeholder graphic.

This means amending the class .se-image with the following:

.se-image
  background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zd…%0D%0AMjUuODMsMTVsMTAuNSwxNy41WiIgc3R5bGU9ImZpbGw6I2EyYTliMSIvPjwvc3ZnPg==);
  background-color: #eaecf0!important;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 40px 40px;

Will comment separately regarding the other updates.

@RHo is T238282#5673324 the only thing left to do here?

In T238282#5728247, @kostajh wrote:

@RHo is T238282#5673324 the only thing left to do here?

Yes! Thanks @kostajh

Change 556255 had a related patch set uploaded (by Kosta Harlan; owner: Kosta Harlan):
[mediawiki/extensions/GrowthExperiments@master] Suggested Edits: Use placeholder icon instead of larger image

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

Change 556255 merged by jenkins-bot:
[mediawiki/extensions/GrowthExperiments@master] Suggested Edits: Use placeholder icon instead of larger image

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

For Design Review

(1) https://gerrit.wikimedia.org/r/#/c/mediawiki/extensions/GrowthExperiments/+/550988/ addresses (and it's been deployed):

• Reduce extract from 4 lines to 3
• Reduce height of image and text from 140px each to 128px each
• Rescale placeholder-image.svg accordingly
• Reduce wrapper height from 300px to 256px
• Increase margins around pager and task explanation

cswiki wmf.8	cs betalabs (with most recent tweaks

Another screenshot from betalabs:

betalabs	cswiki (production)

LGTM - Thanks!