Change #1180168 had a related patch set uploaded (by DLynch; author: DLynch):

[mediawiki/skins/Vector@master] Adjust padding in tools navbar

https://gerrit.wikimedia.org/r/1180168

That patch just tweaks the tools button to remove the gap that's applied to it and move its spacing into the edges of the button, so it no longer has an excessively-large space between the label and the down arrow and absolutely no padding.

gap
before
after

It probably needs more work, particularly to align the height with that of the watchlist button, but this is the most minimal change possible and preserves the existing dimensions exactly.

Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:
https://9c94e3a3b4.catalyst.wmcloud.org/w/

I was playing around with the button component on Codex and it looks like our buttons are using correct hover styles. The "star" and "tools" are default buttons hence it has the grey hover. While the language selector is a progressive button and hence it has a blue hover.

Why is the language selector progressive button instead of default button? I am not sure, but I am assuming it is to draw more attention to it? @Jdlrobson @Volker_E do you have any history on this?

However, I do think we can fix the spacing and padding issues.

• Currently on web. Notice how the arrows are aligned with the article edge which causes hover to bleed outside of that edge for "langauge selector". And seems like the "tools menu" hover state is not following the proper spacing guidelines hence it looks improper without any padding.

current default	language selector hover	tools menu hover

• I am proposing we adjust how the buttons are placed so the arrows are not aligned exactly with the article edge so when the hover shows up it has proper spacing available to show it correctly.

without hover	with hover

To fix the hover states we need to fix the position of the button.

✨✨✨

I'd agree that proposal looks much better.