Polish Changes tab Filter Options button and popover#21412
Polish Changes tab Filter Options button and popover#21412tidy-dev merged 3 commits intodesktop:developmentfrom
Conversation
Fixes the vertical misalignment between Filter Options popover title and its Close button.
- Changes tab Filter Options button now toggle open/close when clicked (previously only opened)
|
@tidy-dev I have not filed an issue for these small improvements but can put one up upon request if you prefer/need it. |
| h3 { | ||
| margin-bottom: var(--spacing-half); | ||
| margin: 0; | ||
| } |
There was a problem hiding this comment.
This margin-bottom is what was causing the vertical misalignment between the h3 and the Close button.
I couldn't find an obvious reason why margin-bottom is needed on macOS, but perhaps it's needed on different platforms?
On macOS, the entire rule can also be removed, or tightened up to margin-bottom: 0; if that's preferred. Here's the before/after with margin: 0;:
Before
After
| &.filtered-changes-list { | ||
| .filter-popover { | ||
| text-align: right; | ||
| min-width: 200px; |
There was a problem hiding this comment.
This is just to give some breathing room to the popover right margin with the current elements. Optional.
| private openFilterOptions = () => { | ||
| this.setState({ isFilterOptionsOpen: true }) | ||
| // Opens the filter options popover, or closes it if it's already open. | ||
| private toggleFilterOptionsOpen = () => { | ||
| this.setState(prevState => ({ | ||
| isFilterOptionsOpen: !prevState.isFilterOptionsOpen, | ||
| })) |
There was a problem hiding this comment.
This matches the behavior of other buttons/panels, like Repositories or Branches buttons in the toolbar. Both buttons close their panels if clicked while opened.
tidy-dev
left a comment
There was a problem hiding this comment.
✨ Thanks for those improvements!
Description
This pull request contains a couple UX/UI improvements to the Filter Options button and popover in the Changes tab.
Screenshots
Heading+button vertical alignment & popover minimum width
Toggle Filter Option popover open
2025-12-31-007859.mp4
Release notes
Notes: