-
Notifications
You must be signed in to change notification settings - Fork 4.2k
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
Conversation
to prevent overflow x image width should be 100%
There was a problem hiding this 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.
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.
Hi @stokesman, thank you. This is way better I applied changes! |
There was a problem hiding this 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.
There was a problem hiding this 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!
@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! |
* 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) ...
This happens when the welcome guide has a vertical scroll, the guide image has a fixed width, and it causes the overflow x scroll.