fix height difference in search and search-and-filter

[codeEmpress1]

Done

• Fix height difference in search and search-and-filter

Fixes [list issues/bugs if needed] #4984

QA

• Go to search and filter and search, inspect both components and ensure the heights are the same
• Open demo
• [Add QA steps]
• Review updated documentation:
  • [List any updated documentation for review]

Check if PR is ready for release

If this PR contains Vanilla SCSS code changes, it should contain the following changes to make sure it's ready for the release:

• PR should have one of the following labels to automatically categorise it in release notes:
  • Feature 🎁, Breaking Change 💣, Bug 🐛, Documentation 📝, Maintenance 🔨.
• Vanilla version in package.json should be updated relative to the most recent release, following semver convention:
  • if CSS class names are not changed it can be bugfix relesase (x.x.X)
  • if CSS class names are changed/added/removed it should be minor version (x.X.0)
  • see the wiki for more details
• Any changes to component class names (new patterns, variants, removed or added features) should be listed on the what's new page.

Screenshots

Before

After

[if relevant, include a screenshot or screen capture]

[webteam-app]

Demo starting at https://vanilla-framework-5019.demos.haus

[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:

vanilla-framework/scss/_patterns_search-and-filter.scss

Line 22 in d4a5eb6

$input-height: calc(map-get($line-heights, default-text) + $input-vertical-padding + $spv-nudge - $input-border-thickness);

This may need to be corrected to include the values from

vanilla-framework/scss/_base_forms.scss

Lines 24 to 38 in d4a5eb6

	background-color: $colors--theme--background-inputs;
	border: 0 solid transparent;
	border-bottom: $input-border-thickness solid $colors--theme--border-high-contrast;
	border-radius: 0;
	color: $colors--theme--text-default;
	font-family: unquote($font-base-family);
	font-size: 1rem;
	font-weight: $font-weight-regular-text;
	line-height: map-get($line-heights, default-text);
	margin-bottom: $input-margin-bottom;
	min-width: 8em;
	padding-left: $sph--small;
	padding-right: $sph--small;
	vertical-align: baseline;
	width: 100%;

input, so take the same line height, paddings and a single border.