New Vector 2022's header is too wide when you have talk pages messages, are using the clock gadget and are on mediawiki/commons or wikidata
Closed, ResolvedPublic3 Estimated Story PointsBUG REPORT
Actions

Assigned To

Authored By

	• Whatamidoing-WMF
	Feb 11 2022, 8:13 PM

Description

What happens?:

Only 80% of the header can be seen at one time:

(requires minimum width of 1720 pixels to display everything)

In Chrome, at default zoom, in a browser window that stretches the full width of a normal laptop.

What should have happened instead?:

I should always be able to see everything:

...except that I shouldn't have to reduce the window to 80% of the normal width to be able to see the entire header. (@alexhollender_WMF 's CSS fix for the fixed-narrow-width of the page's contents doesn't solve this problem.)

QA Results - Beta

AC	Status	Details
1	✅	T301583#7882675

QA Results - Prod

AC	Status	Details
1	✅	T301583#7891607

Details

	Subject	Repo	Branch	Lines +/-
	Always collapse Echo alert on "wide" headers	mediawiki/skins/Vector	master	+19 -5

Customize query in gerrit

Related Objects

Mentioned In: T313735: Make "new message" alert a floating element
T310348: New message alert appears in a new line instead of the same line as user menu

Event Timeline

• Whatamidoing-WMF created this task.Feb 11 2022, 8:13 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptFeb 11 2022, 8:13 PM

thanks for the bug report @Whatamidoing-WMF.

@Jdlrobson @ovasileva I thought we fixed this? I remember us doing some work to make the "You have new messages" thing wrap to a second line when the screen got more narrow.

Tommy_Kronkvist subscribed.Feb 13 2022, 11:32 AM

ovasileva triaged this task as Medium priority.Feb 14 2022, 12:46 PM

ovasileva edited projects, added Web-Team-Backlog (Kanbanana-FY-2021-22); removed Web-Team-Backlog.

Several reasons for this:

The current thesholds do not take into account gadgets injecting themselves into the user menu (this was never intended to be supported)
The current thresholds do not change when the ULS switcher is added.
The long username

We collapse the user messages under 1200px:

Screen Shot 2022-02-15 at 11.23.48 AM.png (680×1 px, 148 KB)

At around 1200-1300px I am seeing friction (e.g. a horizontal scrollbar) without a long username or the gadget :

There are only two practical solutions here on our side:

always collapse the "you have new messages onto a second line
reduce the max-width of the search box.

In addition to this we should suggest a better home for the clock to the gadget developer.

Jdlrobson renamed this task from New Vector 2022's header is too wide when you have talk pages messages (requires minimum width of 1720 pixels) to New Vector 2022's header is too wide when you have talk pages messages, are using the clock gadget and are on mediawiki/commons or wikidata.Feb 15 2022, 7:31 PM

Jdlrobson updated the task description. (Show Details)

@Jdlrobson thanks for the information. I mainly wanted to double check that whatever solution we had worked on was still working as expected (which it sounds like it is). I have a larger to-do to look at various screen widths and responsive behavior so will include this in that audit. Not sure we need to do anything here just yet.

So should this be moved out the sprint board..?

Jdlrobson assigned this task to ovasileva.Feb 16 2022, 7:28 PM

ovasileva edited projects, added Web-Team-Backlog; removed Web-Team-Backlog (Kanbanana-FY-2021-22).Mar 30 2022, 2:16 PM

ovasileva moved this task from Incoming to Current Fiscal Year on the Web-Team-Backlog board.

Jdlrobson moved this task from Incoming to Page Tools on the Desktop Improvements (Vector 2022) board.Apr 4 2022, 9:28 PM

Jdlrobson moved this task from Page Tools to For Iteration on the Desktop Improvements (Vector 2022) board.

Jdlrobson moved this task from Current Fiscal Year to Not ready to estimate on the Web-Team-Backlog board.Apr 11 2022, 9:33 PM

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

[mediawiki/skins/Vector@master] Always collapse Echo alert on "wide" headers

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

gerritbot added a project: Patch-For-Review.Apr 11 2022, 9:34 PM

I think the easiest fix here, is to always collapse the new messages line on cluttered headers.

Test wiki created on Patch demo by Jdlrobson using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/3b45dc8495/w/

ovasileva edited projects, added Web-Team-Backlog (Kanbanana-FY-2021-22); removed Web-Team-Backlog.Apr 12 2022, 9:04 AM

Jdlrobson removed ovasileva as the assignee of this task.Apr 13 2022, 10:49 PM

Jdlrobson moved this task from Needs Analysis to Upcoming on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

ovasileva set the point value for this task to 3.Apr 14 2022, 5:19 PM

ovasileva moved this task from Upcoming to Ready for Development on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

Jdlrobson moved this task from Ready for Development to Code Review on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.Apr 14 2022, 5:31 PM

ovasileva assigned this task to bwang.Apr 19 2022, 5:36 PM

bwang reassigned this task from bwang to Edtadros.Apr 20 2022, 4:23 PM

bwang moved this task from Code Review to QA on the Web-Team-Backlog (Kanbanana-FY-2021-22) board.

bwang subscribed.

Change 779131 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Always collapse Echo alert on "wide" headers

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

ReleaseTaggerBot added a project: MW-1.39-notes (1.39.0-wmf.9; 2022-04-25).Apr 20 2022, 5:00 PM

Maintenance_bot removed a project: Patch-For-Review.Apr 20 2022, 5:31 PM

Test Result - Beta

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

Test Artifact(s):

QA Steps

✅ AC1: The elements in the header should be visible at all resolutions.

Test Result - Prod

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

Test Artifact(s):

QA Steps

✅ AC1: The elements in the header should be visible at all resolutions.

Edtadros updated the task description. (Show Details)Apr 29 2022, 2:46 PM

Edtadros updated the task description. (Show Details)

Looks good, resolving!

Jdlrobson mentioned this in T310348: New message alert appears in a new line instead of the same line as user menu.Jun 15 2022, 4:20 PM

• alexhollender_WMF mentioned this in T313735: Make "new message" alert a floating element.Jul 25 2022, 2:37 PM

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

~~https://patchdemo.wmflabs.org/wikis/3b45dc8495/w/~~

	F35073477: Screen Recording 2022-04-29 at 7.42.04 AM.mov.gif
	Apr 29 2022, 2:45 PM

	F35069094: Screen Recording 2022-04-26 at 2.13.29 PM.mov.gif
	Apr 26 2022, 9:17 PM

	F34952656: Screen Shot 2022-02-15 at 11.23.48 AM.png
	Feb 15 2022, 7:30 PM

	F34952652: Screen Shot 2022-02-15 at 11.22.41 AM.png
	Feb 15 2022, 7:30 PM

	F34948838: Screen Shot 2022-02-11 at 11.59.18 AM.png
	Feb 11 2022, 8:13 PM

	F34948840: Screen Shot 2022-02-11 at 12.02.51 PM.png
	Feb 11 2022, 8:13 PM

New Vector 2022's header is too wide when you have talk pages messages, are using the clock gadget and are on mediawiki/commons or wikidataClosed, ResolvedPublic3 Estimated Story PointsBUG REPORTActions

Description

QA Results - Beta

QA Results - Prod

Details

Related Objects

Event Timeline

Test Result - Beta

QA Steps

Test Result - Prod

QA Steps

New Vector 2022's header is too wide when you have talk pages messages, are using the clock gadget and are on mediawiki/commons or wikidata
Closed, ResolvedPublic3 Estimated Story PointsBUG REPORT
Actions