Improve spacing on search form field

[adamghill]

Currently, there are two spacing issues I see in Vivaldi/Chrome around the searchbar in the top nav. Not sure if this is viewport width thing or a browser thing, though.

This is what it looks like Firefox for me:

1. Too much whitespace to the right of the magnifying glass button.

Removing the explicit width: 40px takes away some of the whitespace around the magnifying button and makes the spacing look a little better to my eyes. When I search the repo for other form-input classes, I didn't see anywhere else that uses a button element inside the form, so I don't think this would affect anything else.

This is what it looks like in Vivaldi with that change:

And this is in Firefox:

2. The toggle is too close to the searchbar in Vivaldi. This does not seem to happen in Firefox. I have some ideas for that fix, but was thinking it might be better as a separate PR. Let me know if that makes sense or if it'd be better in this one.

Tagging @sarahboyce since she might know the most about the search bar because of #2262.

[sarahboyce]

I agree this looks better for desktop screens but tablet and mobile now look a little close to me

I feel like the 40px width is fine as the height is also 40px, the main issue to me is that it is not positioned at the end of the input and the same with mobile. On mobile it is closer to the end than it is on desktop screens

[adamghill]

the main issue to me is that it is not positioned at the end of the input and the same with mobile

Ah, hmm, ok let me try keeping the 40px width, but a different tweak.

[sarahboyce]

I have created an alternative PR #2365 - @adamghill can you test and see what you think?

[adamghill]

I have created an alternative PR #2365 - @adamghill can you test and see what you think?

I replied! I think moving to flexbox is probably the better approach. But, if we don't want to do that I just pushed a change to this branch if you want to check it out. @sarahboyce

[sarahboyce]

Tested and this looks great! It's also a much smaller change so I like it 😁
I will close the other PR 👍

[sarahboyce]

I think you can make a non-draft and I can request a review from the website WG 😁

[bmispelon]

I've tested it locally and the spacing does look better.

Thanks everyone!