Height mismatch between search box and search and filter

[lorumic]

Describe the bug

In the current implementation, due to the spacing around the search icon (which is present only in the search box), the search box has bigger height than the search and filter (1px difference). See screenshots below.

To Reproduce

Steps to reproduce the behavior:

This can be easily checked by inspecting the examples on the VF website docs (as shown in the screenshots below).

Expected behavior

Ideally, both components should have the exact same height. So that when we have a mix of them in different pages of our app, and they're always in the same position of the page, we don't see a 1px "jump" when switching pages.

Screenshots

• Search box:

• Search and filter:

Desktop (please complete the following information):

• OS: Ubuntu
• Browser: Google Chrome
• Version: 121.0.6167.160

[bartaz]

The issue seems to still be there. If you put search box component side by side the search and filter there is a 1px difference.

I'm not certain, but possibly there is a miscalculation here: https://github.com/canonical/vanilla-framework/blob/d4a5eb68e7c12aa6b6ddf58bbf490c09cc3e4f9d/scss/_patterns_search-and-filter.scss#L22

This may need to be corrected to include the values from https://github.com/canonical/vanilla-framework/blob/d4a5eb68e7c12aa6b6ddf58bbf490c09cc3e4f9d/scss/_base_forms.scss#L24-L38 input, so take the same line height, paddings and a single border.

[lorumic]

The issue seems to still be there. If you put search box component side by side the search and filter there is a 1px difference.

Hey @bartaz - I think you wanted to post this comment in the PR. This is the issue :)

[bartaz]

The issue seems to still be there. If you put search box component side by side the search and filter there is a 1px difference.

Hey @bartaz - I think you wanted to post this comment in the PR. This is the issue :)

Ah, yes, I don't know how this happened. I must have clicked a wrong link.