New post editor menu option pushes gear icon off screen on iPhone 8

There are now so many post editor menu options that the gear for additional actions is rendered outside of the expected area. The following screenshot is from my iPhone 8.

3 Likes

hmm yeah this happens on small devices whenever an additional button beyond the default set is added… in this case it’s the mixed text direction toggle. I guess since this bar can have any number of added buttons the least we can do is allow it to scroll horizontally.

9 Likes

Or maybe add an ellipsis button that brings up more options?

I’d rather go with the horizontal scroll as it is easier to access / see the formatting menu instead of having to press an additional button.

Well, that’s fair enough.

Turns out we can’t easily add a horizontal scroll here, because that involves hiding overflowed content, and the gear menu requires overflow to be visible.

@pmusaraj did make an improvement that scales the toolbar better at smaller sizes:

…but at some point we’ll need to figure out a way to support more buttons. Maybe we need to turn the gear icon into a … like on posts and hide more things there by default.

3 Likes

I’m curious to hear feedback on the current solution, as in, are the buttons still reasonably easy to tap on smaller devices (like iPhone 8) now that the spacing between them is reduced?

@awesomerobot I think we should move the “Quote full post” and “Toggle Direction” buttons under the gear menu. They’re surely not used all that often to warrant a permanent place in the toolbar. (The latter, “Toggle Direction” is on here on meta, but it’s behind a site setting, i.e. likely used on very few sites.)

1 Like

I’m on iPhone 8. I think the new spacing is fine (12 buttons and two dividers), but I think this is probably the limit of what can reasonably be in the toolbar. I can’t imagine it being easy to tap if anything more was added.

I agree with the toggle direction for sure. Full quote is borderline. I definitely use it less than things like bold and italics, but I use it more than the two bullet menu options. Honestly, I don’t find the bullet point menu options to be useful at all. I find it much easier to just type the asterisks or numbers manually. (As a side note, hitting the bullet list or numbered bullet list icons multiple times will toggle what you have highlighted on and off, just like it does for bold and italics, but it doesn’t work between the two. It would be nice if hitting the bullet list or numbered bullet list icons would replace the other list type if it was already present.)

For me, the toolbar menu options I use most are the ones already hidden behind the gear icon: Hide Details and Blur Spoiler. I think this mostly comes down to the fact that bullet points, bold, and italics (the others I use a lot) are basically just adding a *, so I can easily type them, while the others involve typing out much longer BBCode-style tags, so hitting a button is faster.

Do you not have any data on how often users click each of the menu options on various devices? I’d think decisions on what to show directly and what to hide behind the gear icon could be made based on that.

A couple other notes/suggestions:

  • I’d get rid of the dividers. The dividers imply there are logical groups, but what does full quote have to do with bold and italics? What does hyperlink have to do with preformatted text? What do bullet point lists have to do with emoji? It seems pretty arbitrary right now, and it’s just wasting space.
  • I assume which menu options are visible/hidden is configurable at the install level, but have you considered making it configurable at the user level? I know everyone works differently, so being able to fully customize the ordering of the toolbar may make sense. For example, you could allow users to order the toolbar options and that’s the exact order it would show up in. Anything that can’t fit based on the device the user is on would automatically get pushed to the gear menu, so on desktop maybe a user would see their top 15, but on mobile maybe only their top 12. (Or maybe they only care about 3 and the rest always are in the gear icon, if that could be supported as well.) May be more complicated than its worth, but I figured I’d mention the idea.
3 Likes

Thanks for your feedback, @seanblue, much appreciated. I very much like your suggestion to demote the unordered/ordered list buttons to the gear menu (mobile only though). I also think you are right about the dividers, on desktop they serve a bit of a purpose, much less so on mobile. I might experiment with removing the dividers on mobile as well.

I have added those three changes to my list. Once that is done, the buttons should breathe easier on mobile.

Not all buttons are configurable at the install level, and I don’t think it would be useful to have them be configurable at the user level. For the vast majority of users, it’s too granular a customization that only super advanced users would need to toggle. (And super advanced users find other ways to do the same thing, for example, using custom stylesheets in their browser.)

4 Likes

Two changes (mobile only) have now been merged (PR): demoting the unordered/ordered list buttons to the gear menu and removing the dividers. Thanks again for the feedback, @seanblue.

4 Likes

This topic was automatically closed after 20 hours. New replies are no longer allowed.