Toolbar on small screens not working for blocks in columns

[virgiliud]

Describe the bug
On screens below 600px, the toolbar for blocks added in column blocks disappears when clicked. Also the toolbar appears to the bottom of the block, not the top. Not sure if that was intended.

To Reproduce
I added a columns block. In one of the columns I added the cover image block. In the cover image block, when I click a button in the toolbar (e.g. align text button) the entire toolbar disappears.

Screenshots

Desktop (please complete the following information):

• Chrome 70.0.3538.77

Additional context

• Gutenberg 4.1.1.

.

[designsimply]

Tested and confirmed that clicking on any of the alignment options for a cover block inside a columns block causes the toolbar to disappear if the screen size is <600px wide. (33s)

^{Tested using "Responsive Design Mode" in Firefox 63.0.1 on macOS 10.13.6 using WordPress 4.9.8 and Gutenberg 4.2.0.}

[virgiliud]

@danhort note: there are issues with other blocks as well that are added in the columns block at screen size < 600px. For example the + sign for adding blocks cannot be selected.

[virgiliud]

Note: this is still an issue in version 4.3.0. Column blocks are behaving strange on mobile and are difficult to click.

[marekhrabe]

I've noticed this bug when working on Columns. I identified that the cause is a pseudo element ::after of .editor-inner-blocks, which gets displayed when class .has-overlay is also active on it.

Not only toolbars are inaccessible. Nothing inside InnerBlocks is clickable due to the element being positioned over everything. Apart from Toolbars, this blocks the access to block UIs and generally clicking anything in blocks - even making text selections. All of that is caught as a click on the parent block and selects it.

I believe we should raise the priority of this issue, as it makes anything in InnerBlocks completely inaccessible on smaller screens.

[marekhrabe]

This overlay pseudo element was introduced as part of #6773

[youknowriad]

In my testing, the clicking the alignment options (left/right) can move the toolbar to the top of the block.

I think the floated toolbars are probably not working properly on mobile unless that's intended. cc @jasmussen @kjellr

[jasmussen]

In my testing, the clicking the alignment options (left/right) can move the toolbar to the top of the block.

This is "intentional" in that it is the best interface we could provide given the complexities that floats add to the interface. However it's also pretty clear that we can definitely improve here:

[youknowriad]

I think this is fixed now that the block toolbar is fixed on mobile