Unify search input and buttons size

[GuillaumeGomez]

Fixes #93060.

Here what it looks like:

You can test it here.

r? @jsha

[rust-highfive]

Some changes occurred in HTML/CSS/JS.

cc @GuillaumeGomez,@Folyd

[jsha]

Thanks for working on this! Much improved but it still doesn't look quite right:

ayu:

dark:

light:

Also, doesn't necessarily have to be for this change, but: setting the width of the search bar with calc, and setting the right position of the icons with absolute pixel positions, seems brittle and over-complicated. It would be nice to change that so the icons just use margin to determine their position, and the search bar uses width: auto (the default, I think).

[GuillaumeGomez]

Also, doesn't necessarily have to be for this change, but: setting the width of the search bar with calc, and setting the right position of the icons with absolute pixel positions, seems brittle and over-complicated. It would be nice to change that so the icons just use margin to determine their position, and the search bar uses width: auto (the default, I think).

That can be done in this PR as well, I don't mind.

Thanks for working on this! Much improved but it still doesn't look quite right:

The problem is the height or something else? (The border looks wrong on the dark theme indeed)

[jsha]

The height is maybe 2 pixels too short on top and bottom? And the border-radius looks still looks a little bigger on the buttons than on the search box. And yes, as you said, the border on the search box is wrong in the dark theme.

Note: I think if you pursue the cleanup I mentioned, it might make it easier to fix the height issue. You can set the containing element to the height you want, and make sure the search box and buttons all have height: 100%.

[GuillaumeGomez]

Oh indeed! Will do that then. :)

[jsha]

Thanks! Much improved. For some reason there is still a 1px difference in height (on both top and bottom) between the search-input and the buttons. I can reproduce on both Firefox and Chrome (latest). It's pretty mysterious because the browser tools say both items are exactly 34px tall, but the search input is clearly just a little bit taller (you can see by removing the margin-left from the help button, so they are adjacent to each other).

I can only assume this is some baked-in browser weirdness specific to input fields? Or perhaps I'm missing something.

This is really hacky, but putting this style on search-input fixed in for me locally:

height: calc(100% - 2px);
margin-top: 1px;

On a similar note: .search-input has border-radius: 2px, and so do #help-button and #settings-menu, but if you look at them closely (or screenshot and zoom in), you can see the search-input is slightly more rounded. If you set .search-input's border-radius: 1px, they render the same. Again, I have no idea why this is. 🤷🏻

[bors]

☔ The latest upstream changes (presumably #93119) made this pull request unmergeable. Please resolve the merge conflicts.

[GuillaumeGomez]

Interestingly enough, I can't reproduce the height bug on firefox:

However I do have it on chrome! That is some crazy dark magic...

[GuillaumeGomez]

Ok, found it! It was the box-shadow. Removing it since it's not being applied anyway (or at least not correctly)...

[GuillaumeGomez]

And done! I updated the uploaded docs as well. It ended up being a nice cleanup. :)

[jsha]

Excellent sleuthing! And indeed this wound up being a very nice cleanup.

[jsha]

Looks good! Thanks for doing this cleanup. It looks great.

@bors r+ rollup

[bors]

📌 Commit f0525da has been approved by jsha

[camelid]

The new search box looks a bit cramped to me. In fact, I half-thought this might have been an accidental regression.

[GuillaumeGomez]

How much bigger (in height I suppose) would you want the search box to be?

[jsha]

Note that one of the issues flagged in #59840 was that the search input was visually bigger than the main heading. I think that makes sense - the main heading should be noticeably bigger than the search box.

[camelid]

How much bigger (in height I suppose) would you want the search box to be?

It's not really height but padding that's the issue.

[GuillaumeGomez]

I see. How much padding do you think we should use then?

[camelid]

I don't have a concrete suggestion, other than "a bit more" ;)

[GuillaumeGomez]

Ok, I'll send a PR in the next days and you'll tell me then if it's good for you. 😆