**Problem statement:**
With current toolbar system, toolbars under a certain viewport size are running into usability limitations (exemplified product: Visual Editor < 900px T92315). Given the already in-place usage of toolbars in VE, Flow, MobileFrontend and upcoming Content Translation, we need to ensure decent behavior and user experience independent from viewport.
**Design limitations:**
- Below 900px single toolbar wraps into two lines
- Below 375px toolbar wraps into three lines (iPhone 5) and only second one is separated with top border, third one not
- We need to ensure minimum tap size on tools, so we can't shrink tools infinitely
| iPhone 5 320px | iPhone 6 375px
| {F9538956} | {F9538855}
**Proposed result:**
Wrapped toolbars do oppose the impression as toolbar and should be avoided.
- Focus on a sufficient tool availability on small viewports without wrapping.
- Possibly enable configuration option (?) for icon+label combination on wider screens, see also T95233
**Possible ways to accomplish:**
- Reduce “Publish changes”/“Save changes” to “Publish”/“Save”
-- There's a lot of possible issues around this specific way, a.o. i18n problems and general confusion, see T131132 for broad discussion
- Remove certain tools on smaller viewport
-- Flow does provide only 4 tools for instance: basic styling, link, mention user and switch editors
- Concatenate certain tools under one on smaller viewports
- Remove labels and go for icon only treatment of tools
Flow in Sept 2017:
{F9538830}