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

discourse:main ← discourse:editor-toolbar-adju

opened 10:42PM - 07 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	35	3265	October 31, 2017
New post editor menu option pushes gear icon off screen on iPhone 8 UX	10	983	October 20, 2021
Composer toolbar button order different for some users Support	4	33	March 9, 2025
Formatting toolbar Plugin	178	31983	July 27, 2024
MD Composer extras Theme component	68	8449	April 25, 2025

Why so many options in the gear editor menu?

Related topics