Block toolbar in Balloon Block Editor build doesn't group items

[panr]

Provide a description of the task

While fixing the issue related to toolbar grouping in Balloon and Inline Editor I forgot to add support for this to balloon block toolbar, so in the Balloon Block Editor build (https://ckeditor.com/docs/ckeditor5/latest/examples/builds/balloon-block-editor.html) we have something like this in the smaller viewports.

In this case, the best solution (probably) is to bind the maxWidth value to the window width, not the editable as we did in balloon and inline toolbar.

📃 Other details

Issue is related to #5597

[panr]

In this case, the best solution (probably) is to bind the maxWidth value to the window width, not the editable as we did in balloon and inline toolbar.

Before I start working on this, could you @oleq confirm if ☝🏻this is the right direction?

[oleq]

In this case, the best solution (probably) is to bind the maxWidth value to the window width, not the editable as we did in balloon and inline toolbar.

Not, really. If the max-width of the toolbar equalled the viewport width, then because the toolbar is attached to the button some (unknown) distance from the left (or right in RTL) boundary of the viewport, the toolbar will almost always stick out the viewport (even if we use a "safe 90% factor").

IMO in this case

• the right edge of the toolbar should never go farther than the right edge of editable (this is where max-width should trim the toolbar)
  • IMO that may be a tricky thing to do because:
    • we don't know where the block button is (it could be 10px or it could be 100px from the editable)
    • the positioning of the toolbar is not simple (it sticks out a little to the left)
  • so to make it simple, it would be best if we could do all the math after the toolbar showed up and has been positioned, then all we need to do is toolbar.maxWidth = toolbar.width - ( toolbarRect.right - editableRect.right )
• the toolbar should be attached east of the button (a followup issue BTW)