## 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)//
| {F75854006} | {F75854022} |
| Current behavior | Proposed improvement |
### Proposed solution
| [[ https://bmartinezcalvo.github.io/suggestion-mode/edit-toolbar/explorations/ | Prototype ]] | [[ https://www.figma.com/design/RFAoZkPgdEhkkz5DqUnGY1/VE-Improvements?node-id=287-16474&t=oSQzAK34VesLsDHM-11 | Figma ]] | [[ https://github.com/bmartinezcalvo/suggestion-mode/tree/edit-toolbar/explorations | GitHub ]] |
| {F75853132} | {F75853929} |
- 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)
[x] Explore responsive edit toolbar on mobile
[] Implement decided solution