Appearance menu goes off screen on smaller viewports
Open, In Progress, LowPublic
Actions

Assigned To

None

Authored By

	AAlhazwani-WMF
	Jul 9 2024, 9:47 AM

Description

Background
We recently made Vector22 the mobile web default skin for wikifunctions.org.

The menu looks fine for pages (like the homepage) where you can control the width...

Steps to replicate the issue (include links if applicable):

Visit any page on wikifunctions at mobile resolution (e.g. ios/safari 17.5.1, iphone 13 mini)
Make sure the appearance menu is enabled in beta features
Open the appearance menu

What happens?:

but for pages where you can't control it (like a function page) it goes offscreen.

What should have happened instead?:

[Check the following with a designer before working on this]

The menu should be full screen

Screenshot 2024-08-29 at 4.33.10 PM.png (1×746 px, 96 KB)

The menu should possibly have a pokey arrow at the top, to be consistent with Echo notification dropdown.

Other information **

Please put the fix in this file:
https://github.com/wikimedia/mediawiki-skins-Vector/blob/master/resources/skins.vector.styles/components/Appearance.less

Related Objects
Search...

Status	Subtype	Assigned	Task
Duplicate		None	T311254 On mobile header icons overlap with search bar in responsive mode
Stalled	Feature	None	T395948 Change viewport for Vector-2022 from hardcoded width to "width=device-width, initial-scale=1"
Open		None	T106463 [EPIC] Ready responsive Vector for wider deployment
In Progress		None	T369609 Appearance menu goes off screen on smaller viewports

Event Timeline

AAlhazwani-WMF created this task.Jul 9 2024, 9:47 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptJul 9 2024, 9:47 AM

update: it seems that the menu goes off screen also for pages where you can control the width. here's an example with a small mobile device (320px width)

www.wikifunctions.org_wiki_Wikifunctions_Main_Page.png (958×640 px, 86 KB)

Jdlrobson added projects: patch-welcome, Vector 2022.Jul 10 2024, 12:15 AM

Jdlrobson moved this task from Incoming to Mobile on the Vector 2022 board.

ovasileva triaged this task as Low priority.Jul 15 2024, 1:12 PM

ovasileva moved this task from Mobile to Groomed on the Vector 2022 board.

Jdlrobson added a project: Readers Essential Work.Jul 16 2024, 11:31 PM

Jdlrobson moved this task from For triage to Unused on the Readers Essential Work board.Jul 16 2024, 11:34 PM

Jdlrobson mentioned this in T321368: Move ScrollEndEventEmitter class to mobile.special.watchlist.scripts module.Jul 26 2024, 4:26 PM

Is it part of the MobileFrontend or the Vector skin?

Jdlrobson updated the task description. (Show Details)Jul 29 2024, 4:54 PM

Jdlrobson added a parent task: T106463: [EPIC] Ready responsive Vector for wider deployment.Aug 1 2024, 1:39 AM

I'm not able to replicate the error and find the same appearance dropdown. Also i found a scope for improvement.

The Add Topic button is only visible half.

LikeLifer subscribed.Aug 1 2024, 9:36 PM

In T369609#10035885, @Anujagrawal wrote:

I'm not able to replicate the error and find the same appearance dropdown.

in order to display the appearance button you need to enable the "Accessibility for Reading (Vector 2022)" beta feature in your user preferences

CleanShot 2024-08-02 at 11.26.25@2x.png (1×1 px, 264 KB)

In T369609#10037882, @AAlhazwani-WMF wrote:

In T369609#10035885, @Anujagrawal wrote:

I'm not able to replicate the error and find the same appearance dropdown.

in order to display the appearance button you need to enable the "Accessibility for Reading (Vector 2022)" beta feature in your user preferences

Yeah i replicated the error what about on my localhost?

Jdlrobson claimed this task.Aug 29 2024, 10:57 PM

Jdlrobson updated the task description. (Show Details)Aug 29 2024, 11:34 PM

Jdlrobson moved this task from Incoming to Groomed on the Web-Team-Backlog-Archived board.

Jdlrobson removed Jdlrobson as the assignee of this task.Sep 12 2024, 4:55 PM

Jdlrobson subscribed.

Jdlrobson edited projects, added Web-Team; removed Web-Team-Backlog-Archived.Nov 13 2024, 11:41 PM

Jdlrobson moved this task from Incoming to Freezer on the Web-Team board.Nov 13 2024, 11:45 PM

Kuldeepburjbhalaike subscribed.Dec 3 2024, 4:54 PM

Being proposed for Q4 via our quarterly grooming process as:
pretty janky. should be relatively easy to fix.

Jdlrobson-WMF changed the task status from Open to In Progress.Apr 4 2025, 10:10 PM

Jdlrobson moved this task from Q4 to Freezer on the Web-Team board.May 30 2025, 9:21 PM

Jdlrobson-WMF removed a project: Web-Team.Aug 19 2025, 5:08 PM

Jdlrobson-WMF moved this task from Unused to Vector 2022 is responsive on wikifunctions.org on the Readers Essential Work board.Mar 20 2026, 5:41 PM

Jdlrobson-WMF edited projects, added Readers Essential Work (Vector 2022 is responsive on wikifunctions.org); removed Readers Essential Work.

	F57350019: Screenshot 2024-08-29 at 4.33.49 PM.png
	Aug 29 2024, 11:34 PM

	F57350014: Screenshot 2024-08-29 at 4.33.10 PM.png
	Aug 29 2024, 11:34 PM

	F56916700: CleanShot 2024-08-02 at 11.26.25@2x.png
	Aug 2 2024, 9:27 AM

	F56307705: www.wikifunctions.org_wiki_Wikifunctions_Main_Page.png
	Jul 9 2024, 9:50 AM

	F56878863: image.png
	Aug 1 2024, 3:39 PM

Appearance menu goes off screen on smaller viewportsOpen, In Progress, LowPublicActions

Description

Related ObjectsSearch...

Event Timeline

Appearance menu goes off screen on smaller viewports
Open, In Progress, LowPublic
Actions

Related Objects
Search...