Prevent welcome guide overflow x scroll

[amir2mi]

This happens when the welcome guide has a vertical scroll, the guide image has a fixed width, and it causes the overflow x scroll.

Before	After

[stokesman]

Thanks for the PR @amir2mi! This is a good idea. One thing about the proposed fix is that it horizontally squishes the image a bit if there are scrollbars.

That could be resolved by addingobject-fit: cover to the img. Since that change would be better made in the CSS, my suggestion would be to undo the change to the width attribute and instead use max-width in the CSS. So here:

gutenberg/packages/edit-post/src/components/welcome-guide/style.scss

Lines 4 to 7 in cfc5d8b

	&__image {
	background: #00a0d2;
	margin: 0 0 $grid-unit-20;
	}

could become:

&__image { 
 	background: #00a0d2; 
 	margin: 0 0 $grid-unit-20;

 	> img {
 	 	display:block;
 	 	max-width: 100%;
 	 	object-fit: cover;
 	}
 } 

Also, the welcome guide in edit-widgets has this same issue so we may want to include changes to it in this PR too.

[amir2mi]

Hi @stokesman, thank you. This is way better I applied changes!

[stokesman]

Looks good. I'll commit the suggestions I've made which are simply linting.

[stokesman]

Now that the checks are passing I'd say this is good to go. Thanks @amir2mi!

[amir2mi]

@stokesman sorry I did not pay attention to whitespace, my IDE always does this way. I appreciate your help in solving this, the bug was getting on my nerves!