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

Blocks and Patterns selector panel width flickers #41794

Open
amjadr360 opened this issue Jun 17, 2022 · 4 comments
Open

Blocks and Patterns selector panel width flickers #41794

amjadr360 opened this issue Jun 17, 2022 · 4 comments
Labels
Browser Issues Issues or PRs that are related to browser specific problems [Type] Bug An existing feature does not function as intended

Comments

@amjadr360
Copy link

What problem does this address?

Switching Blocks and Patterns tabs back and forth selector panel, panel inner elements (search bar, patterns list ) width flickers. The width flickering issue is due to the scrollbar.

Screenshots:

Blocks and Patterns selector panel width flicker

What is your proposed solution?

Solution 1:
Set the max width to block-editor-inserter__content.
.block-editor-inserter__content {max-width: 333px;}

The result can be achieved with solution 1:
Blocks and Patterns selector panel width flicker2

Solution 2:
Make selector panel overflow-y: scroll; rather then overflow-y: auto;
.block-editor-inserter__main-area { overflow-y: scroll;}

The result can be achieved with solution 2:
Blocks and Patterns selector panel width flicker 3

@annezazu annezazu added [Status] Needs More Info Follow-up required in order to be actionable. Browser Issues Issues or PRs that are related to browser specific problems labels Jun 20, 2022
@annezazu
Copy link
Contributor

@amjadr360 can you share version of WordPress and/or Gutenberg you're using along with what browser? Thanks so much!

@amjadr360
Copy link
Author

WordPress: Version 6.0
Gutenberg: Version 13.4.0
Twenty Twenty-Two: Version: 1.2
Browser: Chrome

@annezazu
Copy link
Contributor

Thank you!

@annezazu annezazu added [Type] Bug An existing feature does not function as intended and removed [Status] Needs More Info Follow-up required in order to be actionable. labels Jun 21, 2022
@stokesman
Copy link
Contributor

Seems like this is outdated as the patterns list is now in its own adjacent container. Though perhaps in the mobile view it could still be an issue. Testing that on trunk is currently hindered due a separate issue #65837

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Browser Issues Issues or PRs that are related to browser specific problems [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

No branches or pull requests

3 participants