This aims to fix issues on mobile where the buttons in the composer overflow the allotted space.
Example of the problem:
This is a tricky issue. Buttons on mobile shouldn’t be below a certain size (they’re already too small per most guidelines). We also can’t easily make this section scrollable horizontally, because of the settings dropdown (last item) but also because scrolling horizontally such a small element will inevitably be awkward.
The proposed solution is to use flexbox to handle this. Each button’s horizontal padding has been reduced to a low minimum but each button is also marked as growable via
flex-grow: 1. So, in all cases, the buttons will fill the full width of the button bar.
With two extra icons (text direction support and a video component)
iPhone 8 with the extra icons (crowded, but usable)