CC @alexhollender Bringing this to your attention in case there's anything you'd like to add to the description.

This change was recognized as helpful to @nray's work in the content-width patch (ref). As that work is now high priority and planned to be merged in 1+ week (IMO early next week), I've readied this patch for merge. As the patch has been finalized 1-2 months ago and kept up-to-date since, I believe it can be merged within a few days max. I've created this task to discuss any final thoughts about this patch.

Sharing here instead of T256373, with patch https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/585629 in:

Change 585629 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/Vector@master] [modern] Move the PersonalMenu into the Header

https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/ /585629

In T256893#6272137, @Volker_E

Thanks! Will look into it.

Additional screen from demo to show the expected mid-term outcome (as long as personal menu isn't in place):

In T256893#6272137, @Volker_E wrote:

Sharing here instead of T256373, with patch https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/585629 in:

Can't reproduce. The centerline is properly aligned in the demo: http://patchdemo.wmflabs.org/wikis/c5dd0e27a43e84fe7724e7084d6b6cef/w/index.php/Main_Page
Check whether the wrong commit is checked out again. Check the patchdemo, if the issue shows up there: what browser, what's the cause? (it's not happening for me)

In T256893#6272249, @Volker_E wrote:

Additional screen from demo to show the expected mid-term outcome (as long as personal menu isn't in place):

That's a demo for T249363: Move the existing search to the header in preparation for Vue.js search development
Resizing the header - necessary for the alignment shown in the shot - is in scope for the patch on that ^^ task: 602848.

To avoid scope creep, that's not part of this patch. The target of this task is just moving the PersonalMenu to achieve dynamic layout for later implementing proper responsive breakpoints.

The requests on patch has been answered.

@Demian From the [[ URL | patch demo ]] linked by you above in latest Chrome/macOS:

@Volker_E new PS is uploaded to fix the misalignment.
There was a +0.25em (3px) misalignment between the Logo and PersonalMenu centerline, that I didn't intend to change for the following reasons:

• It's not noticeable from a distance as the Wordmark vs Tagline imbalance shifts the perceived centerline down.
• Per previous instruction to not change the PersonalMenu's internals I intentionally avoided doing that.

I've searched for a specification of the alignment requirements in the follow-up task T249363, it's not defined.
These images above the red lines are marking 3 different alignments. It's unclear whether centerline or baseline alignment is the expectation. I prefer not to have to do guesswork as it's a sure path to errors and misunderstandings. I assumed the centerline alignment that was discussed in various threads still stands and aimed for that.
Note that when wrapped, the whole menu's centerline between the two rows is aligned as there is no space for any other layout. Changing the header's size is the scope of the SearchBox patch.

The misalignment was caused by the padding-top: 0.5em !important; rule in patch 467551.
This was a strong code smell, interacting in complex ways with other padding, margin and top rules of menu items to achieve a delicate, fragile alignment.
To remove that one 0.5em rule, I had to clean up and simplify the layout of all menu items. The original layout is preserved in legacy. The changes work there too, testing that and backporting can be done as simply as replacing 'legacy/Menu.less' with 'Menu-modern.less' in 'skin-legacy.less'.
I reckon there's a history there (T207075). Do you want me to pay attention to any specific complications, corner-cases that you're aware of and I'm not?

Tl;dr: the alignment of PersonalMenu items (+ Echo icons) is a big stack of technical debt that I've cleaned up a few times in different POCs. This work should benefit the project, therefore I intend to make a ticket for cleaning up the menu items and Echo icons. Would you endorse such project and review the patches?

Change 609801 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/Vector@master] [less] Add mediawiki.mixins.flex-align.less

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

Change 609881 had a related patch set uploaded (by Aron Manning; owner: Aron Manning):
[mediawiki/skins/Vector@master] [WIP] [modern] PersonalMenu layout cleanup

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

Change 610187 had a related patch set uploaded (by Jdlrobson; owner: Jdlrobson):
[mediawiki/skins/Vector@master] Move the personal tools and search into header

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

@Jdlrobson There is a fully fleshed-out implementation reviewed by 2 persons that you've promised to review for 2 months. Is there any benefit in working on a competing, half implementation instead of reviewing one that's ready?

Firstly sorry, that patch should have been associated with T249363. My main focus is turning towards the search and trying to understand the relationship between personal tools and understand the trade offs of moving search without personal tools or moving them together.

Is there any benefit in working on a competing, half implementation instead of reviewing one that's ready?

Yes. Lots of benefit and I highly encourage it. Multiple proposals are always welcomed and help us get to the right solution. I've abandoned plenty of patches in the past for better solutions. Hopefully you can tell me why you feel it's "half implemented" and that will help me with understanding the solutions you've come up to. The end result may be one of them, a hybrid of the two approaches or something completely different. Code review is about collaboration in my mind not a one-way street.

Right now as I am able to turn my attention to the search task a(T249363) and your solution I am struggling to understand the approach taken there. I should note your patch for that task is also a WIP so my understanding was we hadn't come up with a final solution yet.

Change 585629 abandoned by Jdlrobson:
[mediawiki/skins/Vector@master] [modern] Move the PersonalMenu into the Header

Reason:
Done in https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/ /610187

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

Change 609801 abandoned by Aron Manning:
[mediawiki/skins/Vector@master] [less] Add mediawiki.mixins.flex-align.less

Reason:
In favor of the same mixins in core: https://gerrit.wikimedia.org/r/c/mediawiki/core/ /609614

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

Change 609881 abandoned by Jdlrobson:
[mediawiki/skins/Vector@master] [modern] PersonalMenu layout cleanup

Reason:
Associated ticket is resolved. Patch is 253 days old.

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