Page MenuHomePhabricator

Edit toolbar on mobile: Enable Text styles drawer
Open, Needs TriagePublic

Assigned To
None
Authored By
bmartinezcalvo
Apr 13 2026, 3:17 PM
Referenced Files
F75952093: image.png
Apr 14 2026, 11:32 AM
F75853929: WhatsApp Video 2026-04-13 at 17.07.24.gif
Apr 13 2026, 3:17 PM
F75853132: image.png
Apr 13 2026, 3:17 PM
F75854022: Captura de pantalla 2026-04-13 a las 17.12.02.png
Apr 13 2026, 3:17 PM
F75854006: image.png
Apr 13 2026, 3:17 PM

Description

Background

As part of T400903, we explored improvements for the mobile edit toolbar. One of these is to improve access to text formatting options by replacing the current text styles dropdown with an expandable text styles drawer that appears as a secondary toolbar row, improving discoverability and ease of use on mobile.

This way, we will also be able to include additional options that are now just available on desktop:

  • Paragraph formatting
  • Bullet and Numbered list
  • Other text formatting options (if needed)
image.png (684×1,216 px, 139 KB)
Captura de pantalla 2026-04-13 a las 17.12.02.png (792×1,204 px, 266 KB)
Current behaviorProposed improvement

Proposed solution

WhatsApp Video 2026-04-13 at 17.07.24.gif (144×320 px, 1021 KB)

  • Tapping the Text styles (A) button expands a second toolbar row below the main toolbar
  • This drawer will be visible while editing the text, being able to include Bold, Italic, or other text formats while seeing the rest of options in the drawer
  • The drawer includes the most common formatting actions (e.g. Paragraph, Bold, Italic, lists), that can be access by an horizontal scroll (with a subtle white gradient at the end)
  • Tapping the button again collapses the drawer
  • Tapping in other menu will close the text styles drawer
  • The main toolbar remains stable (no layout jumps or overlaps)

Acceptance criteria (or Done)

  • Explore responsive edit toolbar on mobile
  • Implement decided solution

Event Timeline

A couple of thoughts:

  • The "Paragraph" tool is variable width, and so can be quite long, for example "Sub-heading 1" in Catalan is "Encapçalament de nivell 1", and we can't just truncate because the important information (the heading level) is often at the end.
  • It may not be obvious that the menu is horiztonally scrollable, epsecially if it is truncated at the end of an icon (for example in the screenshot in the task).

A couple of thoughts:

  • The "Paragraph" tool is variable width, and so can be quite long, for example "Sub-heading 1" in Catalan is "Encapçalament de nivell 1", and we can't just truncate because the important information (the heading level) is often at the end.
  • It may not be obvious that the menu is horiztonally scrollable, epsecially if it is truncated at the end of an icon (for example in the screenshot in the task).
  • For the paragraph options, another possible solution on mobile would be to decide which heading styles are most commonly used and include just them there. Something we could consider and decide.
  • The idea is to use a white gradient to show there are more options to scroll. Wdyt?

image.png (724×196 px, 15 KB)

For the paragraph dropdown width, see T411252 which will make it fixed width.

another possible solution on mobile would be to decide which heading styles are most commonly used and include just them there

The problem with icons is that while we could probably come up with something for paragraphs (¶ maybe) and blockquote, they may not be widely recognized without text labels. Using "Hx" for headings would also likely require producing language variant icons. This is why we (and Google Docs) have stuck with text-only for these options.

The idea is to use a white gradient to show there are more options to scroll.

In the example you show it ends up being quite subtle. While we've used the white gradient in a few places we may want something stronger here (e.g. a fixed arrow >)?