Currently done by the VE toolbar in MobileFrontend, this behaviour should be brought upstream as a config option.
Description
Related Objects
- Mentioned Here
- T92315: OOUI: Responsive VE toolbar
Event Timeline
An actually-responsive toolbar is T92315: OOUI: Responsive VE toolbar; I'm not sure "expanding the styling to fit" is a great model in general, though.
I don't think that is a good idea to have even as optional library feature. I imagine a user having to search for the same button in a quite different layout on a smartphone and a tablet. Seems like a disturbance of mental model. Thoughts, @Pginer-WMF?
For toolbars, it is common to use separators that can be flexible if there is additional space available. Those are normally used to separate groups, not individual components (for example, keeping a group of controls at the right edge and another to the left).
While making sure that buttons have a big enough active area is good, I don't think that stretching them in this way is the best use of space. I think it makes more sense to guarantee a big enough active area without stretching the buttons, apply responsive principles to make sure we provide the relevant options according to space (if there is extra room, displaying the label for the save action may be worth it for extra clarity), and respect the meaningful separations between groups (e.g., the separation between the edit controls and the save action seems to play an important role to prevent accidental actions).