Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Prevent welcome guide overflow x scroll #34713

Merged
merged 5 commits into from
Sep 15, 2021

Conversation

amir2mi
Copy link
Contributor

@amir2mi amir2mi commented Sep 9, 2021

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
1 2

to prevent overflow x image width should be 100%
@stokesman stokesman self-requested a review September 9, 2021 22:01
Copy link
Contributor

@stokesman stokesman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.
image
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:

&__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
Copy link
Contributor Author

amir2mi commented Sep 14, 2021

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

Copy link
Contributor

@stokesman stokesman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor

@stokesman stokesman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@noisysocks noisysocks added [Feature] NUX Anything that impacts the new user experience [Type] Bug An existing feature does not function as intended labels Sep 15, 2021
@noisysocks noisysocks merged commit 8ce7f51 into WordPress:trunk Sep 15, 2021
@github-actions github-actions bot added this to the Gutenberg 11.6 milestone Sep 15, 2021
@amir2mi amir2mi deleted the fix-welcome-guide-scroll branch September 15, 2021 08:43
@amir2mi
Copy link
Contributor Author

amir2mi commented Sep 15, 2021

@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!

fullofcaffeine added a commit that referenced this pull request Sep 16, 2021
* trunk: (74 commits)
  Update docs for ClipboardButton component (#34711)
  Post Title Block: add typography formatting options (#31623)
  Bump plugin version to 11.5.0
  Navigation Screen: Adjust header toolbar icon styles (#34833)
  Fix the parent menu item field in REST API responses (#34835)
  Rewrite FocusableIframe as hook API (#26753)
  Create Block: Remove wp-cli callout since not recommended and outdated (#34821)
  Global Styles: Fix dimensions panel default controls display (#34828)
  [RNMobile][Embed block] Enable embed preview for Instagram and Vimeo providers (#34563)
  Increase Link UI search results to 10 on Nav Editor screen (#34808)
  Prevent welcome guide overflow x scroll (#34713)
  Enable open on click for Page List inside Navigation. (#34675)
  [RNMobile] [Embed block] -  Unavailable preview fallback bottom sheet title update  (#34674)
  Add missing field _invalid in menu item REST API (#34670)
  Fix Dropdown/DropdownMenu toggle closing in all UAs (#31170)
  Navigation submenu block: replace global shortcut event handlers with local ones (#34812)
  Navigation Screen: Consolidate menu name and switcher (#34786)
  Remove parent and position validation from menu item REST API endpoint (#34672)
  Clean theme data when switching themes in the customizer (#34540)
  Components: add reset timeout to ColorPicker's copy functionality. (#34601)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] NUX Anything that impacts the new user experience [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants