Fix vertical alignment of filter checkboxes in search modal #657
Conversation
Co-authored-by: ericholscher <25510+ericholscher@users.noreply.github.com>
Changed filter list items from inline-block to inline-flex with align-items: center to properly vertically center checkboxes with their labels. Also added cursor: pointer to labels for better UX. Co-authored-by: ericholscher <25510+ericholscher@users.noreply.github.com>
src/search.css
Outdated
|
|
||
| :host > div .filters li { | ||
| display: inline-block; | ||
| display: inline-flex; |
There was a problem hiding this comment.
Switching this to flex shouldn't be required. Flex will introduce other spacing issues, like vertical spacing when elements wrap on mobile viewports.
vertical-align: middle on the input is the same effect.
However, normally checkboxes are baseline aligned, not middle aligned. It looks normal to me on Firefox -- the checkbox is aligned with the text baseline:
There was a problem hiding this comment.
@agjohnson I'm not sure how to take this feedback? The screenshots above show the issue -- what is the change that fixes it?
There was a problem hiding this comment.
I don't know what's the fix here either, but I can reproduce the issue that Eric is trying to fix in Firefox as well. I don't know if this is the correct way or not, but this PR fixes the issue locally to me.
There was a problem hiding this comment.
I'm not sure how to take this feedback?
I'm saying this shouldn't switch to flex, all that is needed is an alignment change. Using flex has other alignment side effects.
The screenshots above show the issue
The first screenshot does not, it shows the same alignment as this PR. This is using vertical-align: middle on the input.
There was a problem hiding this comment.
The first screenshot does not, it shows the same alignment as this PR. This is using vertical-align: middle on the input.
I'm not sure what exactly you're saying? This PR doesn't touch an input, but this issue with the checkbox is what I'm trying to fix:
It seems obviously broken to me?
There was a problem hiding this comment.
Changed to use vertical-align: middle on the input element instead of flexbox in commit d850639.
Changed from display: inline-flex to display: inline-block with vertical-align: middle on the input element. This avoids potential wrapping issues on mobile viewports while still achieving proper vertical alignment of checkboxes with their labels. Co-authored-by: ericholscher <25510+ericholscher@users.noreply.github.com>
Filter checkboxes in the search modal were not vertically centered with their labels, creating a misaligned appearance.
Changes
vertical-align: middleto.filters li inputto center checkboxes with their labelscursor: pointerto filter labelsThis approach uses standard CSS alignment instead of flexbox to avoid potential spacing issues when elements wrap on mobile viewports.
Screenshots
Before:
After:
Original prompt
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.