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.

This has actually gotten worse since I made this ticket, because the label added to the watch button really draws out the misalignment with the surrounding text:

I went ahead and filed T429633 for the watch issue, since it's actually entirely separate.

@DLynch we had already captured this issue here and team is looking into it

I am moving this to beta improvements backlog. We need to align the hover states of watch and language buttons. The watch button is using a different colour. Also the hover states for icons/buttons at the edge bleed out of the lines.

T429258's changing of tools to an ellipsis icon has brought along making its hover state jut out from the bar's borders:

vs before:

(This does mean it's now consistent with the alignment of the languages selector, though not in the direction I had hoped. 😅)

In T403272#12056401, @DLynch wrote:

T429258's changing of tools to an ellipsis icon has brought along making its hover state jut out from the bar's borders

Noting that this is how all icon-only buttons at the end of a container are aligned in Vector. I totally agree it looks funky, particularly with this specific icon, but we should consider this in the context of the larger design decision.

Test wiki on Patch demo by Jdlrobson using patch(es) linked to this task was deleted:

https://9c94e3a3b4.catalyst.wmcloud.org/w/