Fix extra scrollbar appearing when searching in the inserter #66229
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
talldan
added
[Type] Bug
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Size Change: +4 B (0%) Total Size: 1.77 MB
ℹ️ View Unchanged
|
mikachan
approved these changes
Oct 18, 2024
There was a problem hiding this comment.
This fixes #66161 for me:
| trunk | this PR |
|---|---|
 |
 |
Not sure if there's anything further we can do to prevent this considering it keeps happening. Maybe we need to add a position: relative wrapper to VisuallyHidden.
A position: relative wrapper on VisuallyHidden sounds like a good potential solution, as that would hopefully be easier to manage than making multiple CSS tweaks. For now, I think the changes in this PR are good to bring in. The comments are super helpful, too 🙌
I’m wondering if the Quick demo: absolute-or-margin.mp4Regarding this PR, the changes seem perfectly reasonable and I expect they’d have no unwanted impacts. |
github-actions
bot
removed
the
Backport to WP 6.7 Beta/RC
gutenbergplugin
pushed a commit
that referenced
this pull request
Oct 19, 2024
Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: mikachan <mikachan@git.wordpress.org> Co-authored-by: stokesman <presstoke@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: colorful-tones <colorful-tones@git.wordpress.org> Co-authored-by: dhruvang21 <dhruvang21@git.wordpress.org>
github-actions
bot
added
the
Backported to WP Core
|
I just cherry-picked this PR to the wp/6.7 branch to get it included in the next release: bd97661 |
ramonjd
reviewed
Oct 20, 2024
| // positioned relative to the tab panel. | ||
| // This makes the overflow rule of the panel work correctly, particularly when the | ||
| // `VisuallyHidden` component is used within the inserter UI. | ||
| position: relative; |
There was a problem hiding this comment.
I think this has caused a regression on the patterns preview panel.
There was a problem hiding this comment.
Update: this regression was fixed in #66267. Thanks @tellthemachines for landing it!
karthick-murugan
pushed a commit
to karthick-murugan/gutenberg
that referenced
this pull request
Nov 13, 2024
…ss#66229) Co-authored-by: talldan <talldanwp@git.wordpress.org> Co-authored-by: mikachan <mikachan@git.wordpress.org> Co-authored-by: stokesman <presstoke@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: colorful-tones <colorful-tones@git.wordpress.org> Co-authored-by: dhruvang21 <dhruvang21@git.wordpress.org>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Fixes #66161
Why?
This is the same kind of issue that has occurred before. The
VisuallyHiddencomponent is implemented following best practices, but it usesposition: absoluteinternally, which means it needs aposition: relativeparent. Without that, due to a CSS quirk, it can overflow a parent of the scroll container, which results in a scrollbar appearing in an unexpected place.Not sure if there's anything further we can do to prevent this considering it keeps happening. Maybe we need to add a
position: relativewrapper toVisuallyHidden. I'll think on it!How?
Adds
position: relativein a couple of places - in the 'tabbed-sidebar' which means we prevent the unexpected overflows ifVisuallyHiddenis used anywhere else unexpectedly. Also ininserter-panel__headerso that if this component is used anywhere else it won't cause unexpected overflows. Comments are added to ensure future devs have context when refactoring these styles.Testing Instructions
Screenshots or screencast
Before
After