Page MenuHomePhabricator

Appearance menu width notice is styled incorrectly
Open, In Progress, MediumPublic1 Estimated Story Points

Description

Background

On small viewports (< 1399px) a notice is added to the appearance menu when its set to "wide", this notice is styled incorrectly

Screenshot 2026-06-25 at 9.57.25 AM.png (474×320 px, 34 KB)

Design requirements

the design should be:

Screenshot 2026-06-25 at 9.57.06 AM.png (458×388 px, 34 KB)

Rollback plan

revert the patch

Event Timeline

bwang triaged this task as Medium priority.Jun 26 2026, 3:45 PM
bwang set the point value for this task to 1.

@bwang The code is already putting this to display: block:

@media ( max-width: 1399px ) {
	// By default, limited width client pref should be hidden unless the breakpoint below is reached.
	.vector-feature-limited-width-clientpref-0 #skin-client-prefs-vector-feature-limited-width {
		.skin-client-pref-exclusion-notice {
			display: block;
		}
	}
}

Source: https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/skins/Vector/+blame/dd9a26f9ea3d180cf07c74d29960c6d14d878a7b/resources/skins.vector.styles/components/Appearance.less#26

I don't see how this would have end(ed) up in the incorrect styling in the screenshot, both predecent sibling ul.vector-menu-content-list and span are display: block.

Tested at 1126 canvas width:

image.png (438×578 px, 43 KB)

Do you have further steps to reproduce?

Volker_E changed the task status from Open to Stalled.Sat, Jul 11, 1:20 PM
Volker_E added a project: CSS.
Volker_E updated the task description. (Show Details)

@Volker_E sorry this wasnt clear in the original task, but the appearance menu has to be unpinned, i.e. in the vector header. try clicking "hide"

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

[mediawiki/skins/Vector@master] Fix appearance menu exlusion notice layout

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

AnneT changed the task status from Stalled to In Progress.Mon, Jul 27, 5:21 PM
AnneT claimed this task.
AnneT added a subscriber: Volker_E.

Change #1318209 merged by jenkins-bot:

[mediawiki/skins/Vector@master] styles: Fix appearance menu exclusion notice layout

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

AnneT removed AnneT as the assignee of this task.Tue, Jul 28, 5:50 PM
AnneT subscribed.

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

[mediawiki/skins/Vector@master] Generalize flex-wrap style for .vector-menu

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

Etonkovidova subscribed.

Checked on enwiki beta - the fix is in place. The gif below shows the correctly formatted label for different screen width.

width_msg2.gif (1,586×793 px, 967 KB)

ldelench_wmf reassigned this task from HFan-WMF to AnneT.
ldelench_wmf added a subscriber: HFan-WMF.