Maybe we can use flex order @Jdrewniak for this one?

Maybe we can use flex order @Jdrewniak for this one?

Possibly, but to the achieve the proposed design we'd need to modify the HTML a bit, since the talk page notice, notifications, and alerts are all within one container element, the search is in a second, and the user links menu is in a third. With that existing structure, moving the notice after the user links menu ain't easy.

In T284243#7135015, @alexhollender wrote:

@Jdlrobson maybe something like this? push the article toolbar down and put the notice under the user tools

@alexhollender are there any other options we could consider e.g. collapsing the message bar into an indicator of sorts at lower resolutions?
Perhaps we can reconsider the idea in T274428 and explore making this position absolute and dismissable?

In T284243#7146765, @Jdlrobson wrote:

@alexhollender are there any other options we could consider e.g. collapsing the message bar into an indicator of sorts at lower resolutions?
Perhaps we can reconsider the idea in T274428 and explore making this position absolute and dismissable?

@Jdlrobson there are other options we could consider. Can you add more context regarding why you want other solutions considered and what kinds of solutions you're looking for (in more general terms)?

I believe the notification bell would have a red dot in this case, so perhaps we can just hide the yellow bar below a certain width?

Ignoring the search box, I think the following mobile design can be achieved with CSS.

The orange bar is absolutely positioned, as @Jdlrobson suggested, but for a different design. The shortcomings with absolute positioning is that we can only (safely) account for the orange bar being a fixed height and not spanning more than one line. We can force the text to remain on one line with CSS, but I can image the wording getting quite lengthy on that banner in some languages and bumping into the"The free encyclopedia" tagline. Maybe we could dispense with that at lower resolutions as well?

In general though, I think absolutely positioning the orange bar at small resolutions, below the rest of the usert links, should be pretty safe in terms of languages. I'm not sure of any gadgets or extensions that would be affected by that placement though.

I do think that we would have to collapse the search box before we move the orange bar though, because otherwise we would have 3 lines of text in the header, pushing the content down substantially.

Update: try absolute positioning, test, if it breaks then hide it.

Have you considered making the text shorter, e.g. "You have a new message" or even just "New message"?

Edit: Sorry, I realized that I'm being annoying. For context, I recently argued for different wording in T274428, and I was trying to make a point. Maybe this discussion should continue on the other task, but I think it is a point worth considering.

In T284243#7185159, @matmarex wrote:

Have you considered making the text shorter, e.g. "You have a new message" or even just "New message"?

We did consider a shorter message. Our thinking was: there are several different types of "messages" one can be notified about. Therefore it would be helpful to be explicit about this notification being for a Talk page message so people understand when/why it appears.

Change 704151 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/skins/Vector@master] Update styles for talk message at lower port widths.

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

hi @alexhollender - per planning discussion earlier today, here are some screenshots of the OBOD between 1000 - 1214 port widths that look somewhat funky. Fwiw, this is also current behavior so maybe it's fine as it is.

With the patch above here are examples of what happens to OBOD at desktop 1000 to 1214 pixels wide:

tablet/iPad Pro 1024

responsive 1047

responsive 1160

responsive 1208

Please compare against current prod. Let me know if we need to do something different at these widths.

Fyi, more screenshots available at mobile and desktop wide widths on the patch at https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/704151/1#message-db1c7ba53f268225549085539cae98e125630cc5

for reference:

Change 704429 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/core@master] Add wider desktop breakpoint

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

@alexhollender ( cc @Jdlrobson ) expected behavior for the username link is that it should only show up in the user links dropdown menu up until 1000px and thereafter should disappear from the user links menu?

current default behavior is that the username link to user page appears in the user links dropdown menu at all breakpoints:

current default behavior is that the username link to user page appears in the user links dropdown menu at all breakpoints:

That seems to have been broken by another change. Fixed in https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/704435 Fix collapsible item behaviour [NEW]

Change 704429 merged by jenkins-bot:

[mediawiki/core@master] Add wider desktop breakpoint

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

Change 704151 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Update styles for talk message at lower port widths.

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

hi @alexhollender here's the latest on beta cluster -- there's a blip at 720-814 (and apparently around 380) that hopefully will be addressed in the design fixes ticket but this is hopefully better than it was (not sure why the gif isn't animating - if you click on it, you can see it in action)

This latest patch is merged so you can test this on beta cluster too by following the instructions in T285442

Test Result - Beta

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

Test Artifact(s):

QA Steps

✅ AC1: Orange talk page notification should display correctly at low horizontal resolutions