Avoid focus style from being cut on the categories panel #24197
Merged
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
youknowriad
added
[Type] Bug
|
Size Change: +33 B (0%) Total Size: 1.15 MB
ℹ️ View Unchanged
|
ocean90
previously requested changes
Jul 26, 2020
| @@ -1,6 +1,5 @@ | |||
| .editor-post-taxonomies__hierarchical-terms-list { | |||
| max-height: 14em; | |||
| overflow: auto; | |||
There was a problem hiding this comment.
We can't remove that because the list has a limited height, it needs to be scrollable.
I was able to fix it by using negative margin with the width of the focus outline.
margin-left: -5.5px;
padding-left: 5.5px;
margin-top: -5.5px;
padding-top: 5.5px;This would replace the padding-left: 2px; workaround in line 5/6. 5.5 pixels is the result of $border-width * 4 + $border-width-focus as used here.
Though, I noticed in Chrome that it has some rendering issues with the half pixel value:
The top/left focus outline of the first input field is smaller than the other fields.
There was a problem hiding this comment.
Good catch, how did I miss that :)
I applied the suggestion and I think the half-pixel issue is not unique to this particular case, it's something @MichaelArestad is trying to fix separately across the UI.
There was a problem hiding this comment.
@youknowriad I have tried two methods. Neither works right now. I ended up having to shelve it for now until either PostCSS updates to work properly (was failing when encountering calc() within a box shadow) or someone comes up with another idea. :/ It was just taking too much time. I will definitely revisit as the random border widths on 1x devices make the whole editor look bad.
There was a problem hiding this comment.
Maybe we should just abandon the 1.5 borders.
There was a problem hiding this comment.
@youknowriad That's certainly the simplest solution.
youknowriad
force-pushed
the
fix/categories-panel
branch
2 times, most recently
from
6c98692
to
66a027f
Compare
youknowriad
force-pushed
the
fix/categories-panel
branch
from
66a027f
to
03edac1
Compare
ocean90
approved these changes
Jul 27, 2020
youknowriad
added a commit
that referenced
this pull request
Jul 27, 2020
youknowriad
removed
the
Backport to WP 6.7 Beta/RC
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.
closes #23989
That overflow was not necessary.
Testing instructions