I took a stab at analyzing this. I think the big challenges are going to be

1. repeating the links in the dropdown menu and hiding/displaying the right one based on the threshold.
2. Making sure the search has some kind of function (something appears to be interfering with the default form submit behaviour)
3. We can't change the min-width for logged in users due to the 3 icons that are shown for logged in users, but we can lower it from 500px to 400px for anonymous users. So not quite at our goal of a responsive design yet. My guess is we should leave the min-width untouched as part of this change.

Two problems I hit that I've descoped are:

• What will happen to the "You have a new Talk page message" notification at lower resolutions?
• How does search work at lower resolutions?

For now, for the purpose of this ticket I suggest making the search a link to the search page at lower resolutions and hiding the talk page message.
I'll make new tasks for the above questions.

Test wiki created on Patch Demo by Jdlrobson using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/759bf35ffc/w/

Change 698008 abandoned by Jdlrobson:

[mediawiki/skins/Vector@master] POC: Collapse header at lower resolutions

Reason:

Proof of concept

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

We estimated this as a medium. Nothing too risky here since we descoped the user messages and search button behaviour with alex's approval.

@alexhollender, @Jdlrobson - just to confirm the change to the AC: "At lower resolutions the search input is hidden search and only the submit button is shown. It should behave like a form submit link (e.g. submit the form with no input value). We'll wire this up in a later task T284242."

Basically we'll have the search button appear only and that will take people to the search results page directly? Do we have a mock for what this would look like? Would it be the magnifying glass or the actually submit button/button that says "Search"?

Basically we'll have the search button appear only and that will take people to the search results page directly? Do we have a mock for what this would look like? Would it be the magnifying glass or the actually submit button/button that says "Search"?

@ovasileva no mock but you can test this intermediate state on https://patchdemo.wmflabs.org/wikis/759bf35ffc/wiki/Main_Page?useskinversion=2

In T276566#7140307, @Jdlrobson wrote:

Basically we'll have the search button appear only and that will take people to the search results page directly? Do we have a mock for what this would look like? Would it be the magnifying glass or the actually submit button/button that says "Search"?

@ovasileva no mock but you can test this intermediate state on https://patchdemo.wmflabs.org/wikis/759bf35ffc/wiki/Main_Page?useskinversion=2

Got it, thank you!

Change 698008 restored by Jdlrobson:

[mediawiki/skins/Vector@master] POC: Collapse header at lower resolutions

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

Test wiki created on Patch Demo by Jdlrobson using patch(es) linked to this task:

https://patchdemo.wmflabs.org/wikis/add8aa397e/w/

Change 701134 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/extensions/Echo@master] Echo notification oo-ui-popupWidget-anchor should point to icon

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

FYI @Jdlrobson: @RHo, @Volker_E, and myself have been discussing moving the user link to the left of notification bell:

current design	proposed design

The potential benefits of the proposed design are:

• username, which is arguably the most personal part of the interface, comes first
• better visual balance
• (minor) consistency with the order in legacy vector

The potential drawbacks of the proposed design are:

• might the username look less like a link if it isn't sandwiched between other things that are obviously buttons?

To investigate the concern about the obviousness of the username as a link I will be running a simple user test in the coming days.

Change 701134 merged by jenkins-bot:

[mediawiki/extensions/Echo@master] Echo notification oo-ui-popupWidget-anchor should point to icon

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

Change 698008 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Collapse header at lower resolutions

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

Change 704435 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] Fix collapsible item behaviour

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

Change 704435 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Fix collapsible item behaviour

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

In T276566#7234032, @Jdlrobson wrote:

Noticed a bug.
At 945px width, I'm seeing the username collapse, but it doesn't appear in the drop down menu. I believe it should be collapsing at a lower resolution like the other ones e.g. it's correct it's not in the dropdown but incorrect it's not showing to the left of the user icon.

Tested during standup - this only occurs when the orange bar is displayed, breakpoint then changes to 1000px for username collapsing and user name does not add itself to the menu

to clarify: the username does not need to collapse at 1000px even when the orange bar is present. It is fine to collapse it at 720px in all cases.

Change 708155 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/Vector@master] Remove unnecessary user page breakpoint style

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

Change 708155 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Remove unnecessary user page breakpoint style

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

AC3 was a temporary solution, is now outdated and can be ignored.

AC4 looks like it needs a new task. @alexhollender @ovasileva how should this behave?

In T276566#7240680, @Jdlrobson wrote:

AC3 was a temporary solution, is now outdated and can be ignored.

AC4 looks like it needs a new task. @alexhollender @ovasileva how should this behave?

can you clarify what you are asking? how should what behave?

thanks for clarifying @Jdlrobson — the new task is here: T287522

Edward we can skip AC3 and AC4 when QAing in production but this is looking good. Thanks for flagging.

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

https://patchdemo.wmflabs.org/wikis/759bf35ffc/w/

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

https://patchdemo.wmflabs.org/wikis/add8aa397e/w/