Page MenuHomePhabricator

Make the Edit toolbar responsive on mobile
Open, MediumPublic8 Estimated Story Points

Description

Background

As part of T400903, we explored improvements to the mobile edit toolbar. One of these improvements is to make it responsive so it adapts to different screen sizes to show more actions on larger screens while prioritizing core actions on smaller ones.

Proposed solution

image.png (1,756×1,008 px, 90 KB)
Grabación de pantalla 2026-04-13 a las 16.56.47.gif (490×347 px, 1 MB)
  • Define a priority system where core actions are always easily accessible
  • Always show core actions (e.g. Undo, Text styles, Link, Add +)
  • Show secondary actions (e.g. Cite, Suggestions) only if space allows. If not, lower-priority actions will be included within the Add + or More options (ellipsis) menus
  • Ensure a minimum button width of 40px; when space is limited

Based on this approach, the number of options in the toolbar (apart from Close and Publish that will be fixed, will be:

  • 320px screens: Up to 5 options
  • 360px screens: Up to 6 options
  • 393px screens (and more): Up to 7 options

Acceptance criteria (or Done)

  • Explore responsive edit toolbar on mobile
  • Implement decided solution

Details

Related Changes in Gerrit:

Event Timeline

ppelberg set the point value for this task to 8.Sep 2 2026, 5:28 PM

Change #1351206 had a related patch set uploaded (by Esanders; author: Esanders):

[oojs/ui@master] Toolbar: Implement promotable tools

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

Test wiki created on Patch demo by BMartinezCalvo (WMF) using patch(es) linked to this task:
https://69cd8aa983.catalyst.wmcloud.org/w/

Also created an OOUI Demos page:
https://69cd8aa983.catalyst.wmcloud.org/w/build/ooui/demos

Change #1351206 merged by jenkins-bot:

[oojs/ui@master] Toolbar: Implement promotable tools

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