When there are too many buttons for available width of the mv-bar, all disappear

[karger]

Mavo lets you add buttons to the mv-bar. But if you have an app on e.g. a phone, not many of those buttons fit on a line. If they extend beyond, all of them vanish. Perhaps a better option would be for them to wrap? https://codepen.io/karger/pen/NWrVoyj?editors=1100

[raytran]

This seems to be intended behavior? https://github.com/mavoweb/mavo/blob/243feed58e3a57743262bd8234e63bf9d05fbe4e/src-css/_bar.scss#L185-L191

Deleting the & > button selector and adding a flex-wrap: wrap to .mv-bar makes the buttons wrap as desired. I'm not sure why normal buttons should be hidden anyway? Perhaps a better option would be a dropdown hamburger menu or something similar.

[DmitrySharabin]

Since all the UI in Mavo is fully customizable via CSS, what if we just let authors decide how they want their apps to be styled? Whether they want the buttons to wrap, be replaced with a hamburger menu, or be styled somehow else. We already provided the default styling, and the rest is on their side. No?

[LeaVerou]

@DmitrySharabin I tend to favor convention over configuration as a design principle in the APIs I design. As famous computer scientist Alan Kay put it “Keep simple things simple, and complex things possible”. How do these principles translate to this issue? Custom styling should be possible, but we should still ship with sensible defaults that can be used out of the box without further configuration.

Currently, on small screens, the buttons become icon buttons. There is a test here (ignore the second line): https://test.mavo.io/bar.html#sizing

However, I like Raymond's proposal about a hamburger menu. The upside of icon buttons is efficiency, once learned (only one click, since they're all right there), the downside is learnability, for the icons that are non-obvious. The hamburger (or more conventionally for toolbars, a downwards triangle) menu can maintain the text, so is more learnable. It also scales better to toolbars with many buttons, that wouldn't fit even as icons.