[Filters] Fix button width changing when popover is activated #2003
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
alexieyizhe
changed the title
tmlayton
reviewed
Sep 16, 2019
tmlayton
approved these changes
Sep 16, 2019
There was a problem hiding this comment.
@alexieyizhe this is great, thanks for the fix! I have a minor suggestion for the changelog entry, otherwise this is up to date with master and will approve the visual regression tests.
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.
WHY are these changes introduced?
Fixes #1853 :D
The button for a filter was changing visually in width when focused/clicked on. This fixes those changes.
WHAT is this pull request doing?
Setting a negative left margin on every child element of the
MoreFiltersButtonContainerstopped duplicate borders from showing, but it meant that the More Filters button was actually further left than the container itself.When the rightmost shortcut filter is activated, the z-index is increased from 10 to 20, which places it above the More Filters button and reveals the entirety of the button, giving the impression that the width has increased.
This PR modifies the margin-left to only set it on a single container, which keeps the double border hidden but does not overlap the More Filters button with the shortcut filter button.
Before
After
See #1853 for a working reproduction test case
🎩 checklist
README.mdwith documentation changes