Page MenuHomePhabricator

Page options menu cut off on mobile
Open, Needs TriagePublicBUG REPORT

Description

It seems that the Page Options menu is being improperly placed, resulting in the menu options being cut off on any device width smaller than ~450px. I've observed this on a totally fresh installation of Mediawiki, using multiple skins, with nothing installed save for the most recent 1.44 release of the VisualEditor extension, across both Firefox and Chrome. This is also happening on multiple in production wikis and skins, on multiple mobile and non-mobile devices.

Firefox:

Screenshot_20251114_195809.png (667×391 px, 36 KB)
and Chrome:
Screenshot_20251114_195953.png (675×386 px, 44 KB)

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

What happens?:
The menu is cut off by the edge of the display, making the options unreadable.

What should have happened instead?:
I assume the menu should be displayed full-width across the center. If you disable the menu element's 'right' and 'margin-left' properties, it appears to do so, as shown here:

Screenshot_20251114_200833.png (675×386 px, 49 KB)
These properties are being applied directly to the element in question, not via CSS selectors, and the 'right' property is re-applied if the page is scrolled.

Software version (on Special:Version page; skip for WMF-hosted wikis like Wikipedia):
Mediawiki: 1.44.2
VisualEditor:
– (56c6279) 07:43, 12 November 2025 (used for above testing)
– (ae3bd62) 06:56, 24 September 2025

Other information (browser name/version, screenshots, etc.):

Event Timeline

matmarex added a project: OOUI.
matmarex subscribed.

These is already code to handle this case, but it looks like it only works correctly when the dropdown's initial placement is to extend to the right (like the dropdowns for the left side of the VE toolbar), and not when it's to extend to the left (like the dropdowns for the right side of the VE toolbar).

Change #1211756 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[oojs/ui@master] PopupToolGroup: Fix popup filling available space with align: 'after'

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

Change #1211756 merged by jenkins-bot:

[oojs/ui@master] PopupToolGroup: Fix popup filling available space with align: 'after'

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