Fix author select width #3518
Fix author select width #3518
Conversation
| @@ -1,3 +1,8 @@ | |||
| .editor-post-author { | |||
| width: 100%; | |||
There was a problem hiding this comment.
No, I removed. Thanks.
editor/sidebar/post-author/index.js
Outdated
| @@ -12,7 +12,7 @@ import { PostAuthor as PostAuthorForm, PostAuthorCheck } from '../../components' | |||
| export function PostAuthor() { | |||
| return ( | |||
| <PostAuthorCheck> | |||
| <PanelRow> | |||
| <PanelRow className="editor-post-author"> | |||
There was a problem hiding this comment.
Since this class is no longer being styled, I'd suggest removing this change (YAGNI).
|
Apologies in the delay in revisiting this one, as I was out a large part of last week. It appears that changes made in #3608 have introduced merge conflicts here. You'll need to rebase your branch against the latest master and resolve conflicts, likely with the moving of the file (I'd guess these files were moved without If you need help with this, please ping me on core WordPress Slack as |
|
No problem. I'll try do that. Anyway thanks for support. :) |
There was a problem hiding this comment.
On a final review I encountered a few remaining issues:
- While
width: 100%does prevent overflow, it also causes the select to occupy the full width even if it doesn't need to (i.e. the opposite, short username case)- In testing, I found that applying
min-width: 0instead of this change fixed the issue in Chrome, but oddly not in IE11. It seems strange thatmax-width: 100%has a different effect thanwidth: 100%for constraining. I wasn't able to identify a solution that worked across all browsers; my hunch is something with flexbox, such asflex-shrinkon the select.
- In testing, I found that applying
- This should apply more generally to elements (
selects?) within thePanelcomponent, thinking as a.components-panel__row selectstyle.- For example, the same issue occurs if a post format with a long name exists.
|
I tried use flex-shrink and flex-grow but doesn't work because author select element make sidebar horizontally scrollable. When I use I've also tried different approach (select in a new line with
|
Description
If the name of author is too large so author select element make sidebar horizontally scrollable. #3432
How Has This Been Tested?
This has been tested with "npm test", "npm run test-e2e" and manually on Chrome and Firefox.
Types of changes
Bug fix
Checklist: