Why so many options in the gear editor menu?

Don · September 20, 2022, 1:44pm

Hello,

Is this a touchscreen device?

github.com/discourse/discourse

UX: improve composer toolbar flexibility

main ← editor-toolbar-adju

merged 06:20PM - 13 Sep 22 UTC

awesomerobot

+46 -66

We've been having some problems with toolbar overflow when there are many button…s present, so I did some refactoring in an attempt to avoid the issue and simplify... Relevant topic (there are a couple customer reports as well): https://meta.discourse.org/t/toolbar-of-composer-is-too-wide-at-least-on-ipad/234743/14 Part of the issue is that we use different positioning for the cog dropdown on iOS and desktop, so we can't hide overflow without also hiding/breaking the dropdown menu on iOS. (We use different positioning on iOS because it has trouble with fixed position elements) In this PR I've approached the "too many buttons" issue and the "can't hide overflow" issue in a few different ways: 1. I updated the way we hide menu items from `site.mobileView` to `capabilities.touch` — this means that iPads are now included in the mobile behavior of showing fewer icons. They were previously left out and had some issues due to narrower widths. It's possible some large touch devices get caught up in this, but showing too many icons on iPad (and causing overflow issues) seems more problematic than hiding some options within the cog dropdown. (Alternatively we could check viewport width instead of relying on mobileView.) 2. I moved the preformatted text button to be hidden within the cog menu on mobile. This is most often used for code, and it seems less likely that someone's sharing code on a mobile device. 3. I'm allowing the buttons to wrap. This isn't ideal, but better than breaking the cog menu and might make admins think twice about how many buttons they have here 4. I updated the layout of the button bar from flex to grid. This allows us to use auto-fill/fit, simplify our CSS, and allow for easier equal spacing when wrapping. I also removed the dividers because grid containers want all children to be in an equal-width column. I don't think these were doing much for us other than occupying more space, but if we want to add them back I can use CSS psuedo selectors. Default: ![Screen Shot 2022-09-07 at 6 37 11 PM](https://user-images.githubusercontent.com/1681963/188995720-f442c08b-4534-418e-9191-33a0bf82b576.png) Too many buttons wrap: ![Screen Shot 2022-09-07 at 6 37 32 PM](https://user-images.githubusercontent.com/1681963/188995740-45702ddd-b801-4739-b370-9df360b5559f.png) Mobile default: ![Screen Shot 2022-09-07 at 6 37 49 PM](https://user-images.githubusercontent.com/1681963/188995751-00ff6d5e-c38a-4ce1-b16f-8ac48de1b25d.png) More mobile buttons can fill the space: ![Screen Shot 2022-09-07 at 6 39 27 PM](https://user-images.githubusercontent.com/1681963/188995834-be83880a-86a4-4b66-bf9f-7639da54f645.png) Too many mobile buttons: ![Screen Shot 2022-09-07 at 6 40 02 PM](https://user-images.githubusercontent.com/1681963/188995886-ce5d06bf-2a7b-42f7-9327-7cf0fb0c65d7.png) iPad default: ![Screen Shot 2022-09-07 at 6 38 16 PM](https://user-images.githubusercontent.com/1681963/188995764-f66445a8-ef12-430e-ab0f-db5ad1aedfa4.png)

Topic		Replies	Views
Composer menu: on narrow pages, items disappear off the right side including all important OPTIONS item UX composer	37	3508	August 29, 2025
New post editor menu option pushes gear icon off screen on iPhone 8 UX	10	1040	October 20, 2021
Composer toolbar button order different for some users Support	4	102	March 9, 2025
Formatting toolbar Plugin	189	33598	March 29, 2026
MD Composer extras Theme component	70	8932	July 8, 2025

Why so many options in the gear editor menu?

Related topics