thanks for catching this & creating a task.
seems like this is also the case when languages exist:

The spacing is also inconsistent:

The content-to-content[1] spacings are:

• Between the first 4 icon-only buttons: 20px (5px button padding (x2), 1px button border (x2), 8px column spacing from the flex box)
• Between the last icon button and "Add topic": 27px (5px button padding, 1px button border (x2), 8px column spacing, 12px padding on the labelled button)
• Between the two labelled buttons: 26px (12px button padding (x2), 1px button border)
• Between "Add languages" and dropdown: 19px (12px button padding, 1px button border (x2), 5px button padding)

The correct spacing should be 20px (i.e. the first 4 buttons are configured correctly). As these are all frameless/quiet buttons they should have 5px inner padding (plus the 1px border), not 12px. There should also be an 8px space between buttons. This matches the implementation in OOUI.

[1] measuring from the edge of the 20px icon canvas, or edge of text content as appropriate

Change 884918 had a related patch set uploaded (by Esanders; author: Esanders):

[mediawiki/skins/Vector@master] Fix inconsistencies in sticky header font-size and spacing

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

cc @ovasileva @Jdlrobson

It looks like "Add topic" was added to the .vector-sticky-header-icons element which is supposed to be reserved for icon only buttons.

It should be a sibling of that element like the "Add languages" button. That fixes the font size consistency issue.

Regarding font size - do we want these to be 14px given our eventual plans to shift to 16px? Right now language is 1em but we can easily tweak those if needed.

In T326571#8570827, @Jdlrobson wrote:

It looks like "Add topic" was added to the .vector-sticky-header-icons element which is supposed to be reserved for icon only buttons.

Is there a reason for that? Can we just have one flex container with consistent spacing?

It should be a sibling of that element like the "Add languages" button. That fixes the font size consistency issue.

Regarding font size - do we want these to be 14px given our eventual plans to shift to 16px? Right now language is 1em but we can easily tweak those if needed.

Given that almost nothing is using 16px yet we should stick with 14. Moving to 16 has been talked about for many years but until it has proper momentum, moving one or two new features is just going to create jarring inconsistencies.

Is there a reason for that? Can we just have one flex container with consistent spacing?

I believe the intention was to allow for extensibility later. If the container only contains icons, we don't run into weird consistencies where an API adds an icon and another adds a button and we end up with a button sandwiched between icons.

Given that almost nothing is using 16px yet we should stick with 14.

I don't feel strongly either way around what font size we use, but if we're setting font-size it seems we should set it on the sticky header element, rather than on the buttons themselves. The mw-ui-button is font-size 1em so should adapt to the container element.

Alex has confirmed that the sticky header should use font size 14px.

Currently planning this for the next team sprint, starting Mon, March 13

Change 884918 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Fix inconsistencies in sticky header font-size and spacing

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

Kieran: Please move to QA if all looks good.

Looks good to me

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Ventura
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: "Add languages" in sticky header should be 14px

Test Result - Prod

Status: ✅ PASS
Environment: enwiki
OS: macOS Ventura
Browser: Chrome
Device: MBP
Emulated Device:NA

Test Artifact(s):

QA Steps

✅ AC1: "Add languages" in sticky header should be 14px