-
Notifications
You must be signed in to change notification settings - Fork 4.1k
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
Navigation: Fix overflowing menu name in the navigation selector dropdown #45647
Navigation: Fix overflowing menu name in the navigation selector dropdown #45647
Conversation
|
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.
@getdave, thanks for the review. It looks like I had accidentally deleted one of the properties before committing the changes. I've added it back so it should now be working as expected. Could you pull the changes and take another look? |
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.
Tested and works as described. Thank you for the fix 👏
Left some small changes that appeared unrelated which we should revert.
@@ -158,7 +157,7 @@ $colors-selector-size: 22px; | |||
min-width: $colors-selector-size; | |||
height: $colors-selector-size; | |||
min-height: $colors-selector-size; | |||
line-height: ( $colors-selector-size - 2 ); | |||
line-height: ($colors-selector-size - 2); |
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.
line-height: ($colors-selector-size - 2); | |
line-height: ( $colors-selector-size - 2 ); |
This change seems unrelated.
.wp-block-navigation | ||
.wp-block + .block-list-appender | ||
.block-editor-button-block-appender { |
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.
Seems like another unrelated formatting change we should revert
.wp-block-navigation | ||
.components-placeholder.is-medium | ||
.components-placeholder__fieldset { |
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.
And one more unrelated formatting change...
.wp-block-navigation | ||
.wp-block-navigation__uncontrolled-inner-blocks-loading-indicator { |
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.
And one more.
What?
This PR fixes the overflowing text in the navigation selector dropdown for menus with longer names.
Why?
It resolves the UI bug with the navigation selector dropdown reported in #45294.
How?
This PR wraps the text for the selected menu within the navigation selector dropdown toggle, so that flex and text CSS properties can be applied to avoid the overflowing.
Testing Instructions
Screenshots or screencast
Before:
![CleanShot 2022-11-09 at 11 24 02](https://cdn.statically.io/img/user-images.githubusercontent.com/2722412/200912489-5bedf3b4-a188-4414-9641-5c17bfb4a981.png)
After:
![CleanShot 2022-11-09 at 11 23 10](https://cdn.statically.io/img/user-images.githubusercontent.com/2722412/200912508-6a7b1cf9-c582-4d42-9ee0-1eac7d6b5d59.png)