Timebox to 3

This alignment issue comes down to the menu tab styles, which applies a 2px bottom border to achieve this style:

padding: 9px 0 7px 0;
margin-bottom: -1; // to help make the bottom border align closer to the grey border of the container element.

IMO the best way to resolve this is to remove the bottom border altogether, and use an absolutely positioned psuedoelement on the menu tabs to achieve the border style. This way both the menu tab links and codex buttons can just be consistently 32px tall, and vertically centered

Change #1307144 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[mediawiki/skins/Vector@master] [proof of concept] Simplify vertical alignment of tabs

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

I implemented @bwang's idea to change the border-bottom of the tabs to a pseudo element and I think it works really well.

Next steps: have someone review the patch and we can decide if we want to move forward with the code. If so, we can close this spike and open a new task, or transition this spike to an official task.

This is so much better!
+1 to transitioning to task. Maybe 3 is enough to start an estimation thread in the team channel and get this fast tracked?

Thanks @Jdlrobson-WMF! I'd love to get @bwang's eyes on this when he has a chance - he and I had originally discussed making this a pure spike first just to ensure we're thinking about the solution and any risks it introduces thoroughly before finalizing and merging. I'll check back in on this in a day or two to make sure we're not losing momentum.

I'd call this "disturbing", as if someone is pushing these unpolished new features (reading list?) really, really hard.

Composite image of tabs/buttons on hover:

@Ponor where are you seeing that behavior? In Chrome I can see the 1px misalignment of the watch and tools buttons as documented in the task description, so I'm curious where you're seeing such a big gap between the bottom of the toolbar and the button backgrounds.

This task and its associated patch should fix the vertical misalignment issues - could you please test out the patchdemo and let me know if you're still seeing any issues with vertical alignment?

Thanks for your response, @AnneT

That's my Firefox on Fedora Linux.

And it's similar in Firefox Beta for Android, desktop view:

I see that these additional buttons and tabs have css classes and overall structure different from the original V2022 ones. Makes me wonder if that really has to be so complicated? Last time I checked, the watchstar had a 72 deg rotation, it was blue, unlike the bookmark icon that's black, and bigger.

In your patchdemo I don't see anything between View history and the overflow (ellipsis) button, so I can't tell. Do I need to be logged in?

Test wiki created on Patch demo by ATomasevich (WMF) using patch(es) linked to this task:
https://6e9e9c1fa1.catalyst.wmcloud.org/w/

In T430657#12101345, @Ponor wrote:

In your patchdemo I don't see anything between View history and the overflow (ellipsis) button, so I can't tell. Do I need to be logged in?

Yes, you'll need to log in (you can just create a throwaway account) to see the watchstar, and opt into the "Saved pages" beta feature to see the bookmark. I actually just updated the patch and patchdemo, so please use this link: https://6e9e9c1fa1.catalyst.wmcloud.org/wiki/Main_Page

Makes me wonder if that really has to be so complicated?

I promise that we're trying to make this as uncomplicated as possible, but there are a lot of factors we have to consider. For example, we're trying to balance following best practices and our own design system when we add new things, while not changing existing things if we can avoid it. The watch button is styled to look like a link, but (if you have JavaScript enabled, at least) it's not - it's a button that triggers an action. Normally, we style buttons differently from links to make it clearer what will happen when you click something. We don't want to change the watch button too much (we added the "watch" and "unwatch" text to clarify the difference between the star and bookmark icons), so we left it blue and link-ish, but made the new bookmark button look like a button. The bookmark is black because blue buttons are only meant to be used when they represent a "progressive" action that moves you forward in a process.

Thanks again!
The new patchdemo looks better, I don't see any issues with vertical alignment:

Hover - composite

I don't see how "watch" and "bookmark" buttons/actions are different, they are literally:

• "Add this page to your watchlist"
• "Add this page to your saved items"

And it's hard for me to believe that this 2.5-inch "Nicht mehr beobachten" is going to be shown to everyone at all times till the end of time. We were fine without the label for 25 years (o,o)

In T430657#12106184, @Ponor wrote:

Thanks again!
The new patchdemo looks better, I don't see any issues with vertical alignment:

Awesome, thanks for confirming!

I don't see how "watch" and "bookmark" buttons/actions are different, they are literally:

• "Add this page to your watchlist"
• "Add this page to your saved items"

Right, I agree - the question is, should we:

1. Use the existing watchstar styles for everything, meaning we're continuing to use a pattern we don't think is as clear/accessible to all people and doesn't fit within our design system.
2. Use the bookmark/design system styles for everything, meaning we'd be changing the whole toolbar (and making it even harder to squeeze in all the toolbar items, since everything would be bigger)
3. Use different styles for the watchstar and bookmark
4. Some other creative/long term/big solution. For instance, maybe the watchlist and reading lists could be combined in some way, so you can save an article then decide if you want to watch it, add it to a reading list, or both. Then we'd only need a single "save article" icon.

For now, we've opted for the third solution. We are seeking feedback in different venues on all of this and trying to balance the needs and wants of everyone as best we can, but there probably isn't something that will be perfect for every scenario.

And it's hard for me to believe that this 2.5-inch "Nicht mehr beobachten" is going to be shown to everyone at all times till the end of time. We were fine without the label for 25 years (o,o)

Fair point, and I've brought this feedback to my team. I think some people are using custom CSS to hide the label of the watchstar button, but I realize that's not an optimal solution.

@Ponor I really appreciate the time you've taken to help us improve this experience, especially for languages where action labels are quite long. Your partnership here has been really vital as we refine these menu changes. With regards to introducing the "watch" label next to the star icon, there are two main reasons:

1. For newer editors who are not familiar with Wiki's interface and history, the star indicates more of a "favoriting" behavior as its popular usage across the Internet, rather than the "watch" or "subscribe" behavior where they will be updated on subsequent changes. We have run some data and have seen that watch star usage is minimal for editors who have fewer than 100 edits (https://phabricator.wikimedia.org/T406390#11338137). It seems like a lost opportunity to introduce newer editors to a powerful feature that can deepen their engagement with contribution, so introducing the label aims to help new editors, even if it feels redundant for experienced editors.
2. The confusion is further compounded when we introduce the bookmark, as the two buttons without label would be too confusing for someone who only comes to Wikipedia to read and bookmark their favorite articles without contributing just yet. We are embarking on this work to allow users to curate a more personalized reading experience on Wikipedia to try and address readership loss trends, and it is tough to do that without impacting some existing interfaces that editors have grown very accustomed to. I apologize for the inconvenience as we try to minimize the impact on menus and navigation items that longtime users have grown familiar with, but we are hoping to balance the introduction of changes that can hopefully encourage more people to come spend time on Wikipedia with making sure the transitions are smooth for our beloved experienced users.

Thank you again for all the great feedback, I just wanted to give some context in regards to the motivation behind the change, in case other folks stumble upon the conversations here in the ticket as well!

Change #1307144 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Simplify vertical alignment of tabs

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

First of all, thank you both @AnneT and @HFan-WMF.
I like to think I have an eye for these things ;) and that's why you see me in many recent topics. Thanks for listening!

I've said it somewhere before, but let me repeat it: the watchstar label could (probably) be conditional: show until a user had 100 edits, been with us for more than 30 days, and is watching more than 6 pages.

Or: if/while you're showing the label, put the watch button in the overflow menu, just like on mobile pages.

On desktop, users will see the tooltips.
On mobile devices, most people will see the mobile shell, so all this won't even matter.
Leaving it with those long labels, as it is now, gets you (and us) in all sorts of problems, and I think that's a higher price to pay than having someone press the wrong button (which can easily be reverted).

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

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

https://6e9e9c1fa1.catalyst.wmcloud.org/w/

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

https://f8ca352c09.catalyst.wmcloud.org/w/