Trix: Toolbar on mobile does not wrap over multiple lines

[scottharvey]

When using Trix on a narrow screen such as an iPhone 5 the toolbar does not wrap over multiple lines. I can see in previous tickets (https://github.com/basecamp/trix/issues/140) that the toolbar was on multiple lines but when using the current version the toolbar does not wrap.

Steps to Reproduce

1. Use Chrome's responsive view and view the editor using an iPhone 5

Details

• Trix version: 0.11.4
• Browser name and version: Chrome 67
• Operating system: MacOS

[javan]

You can set flex-wrap: wrap; on .trix-button-row in your application's styles if you want wrapping.
https://github.com/basecamp/trix/blob/01c2e7b345a53b869d9aa86b8daf1811f7b21f21/assets/trix/stylesheets/toolbar.scss#L14-L18

[MareinK]

I applied @javan's solution by adding the following to my site's CSS:

trix-toolbar .trix-button-row {
  flex-wrap: wrap;
}