Block toolbar looks odd on mobile

[ellatrix]

Describe the bug
A clear and concise description of what the bug is.

When selecting a block, it looks like the toolbar appears for the next block. I’m guessing there’s some styling issues for the block toolbar, I’m not sure how it’s supposed to look.

To Reproduce
Steps to reproduce the behavior:

1. Select a block in Gutenberg on mobile

Expected behavior
A clear and concise description of what you expected to happen.

Block toolbar to feel more connected.

Screenshots
If applicable, add screenshots to help explain your problem.

The last picture shows also the two toolbars on desktop. Maybe on mobile these can be merge into one?

Desktop (please complete the following information):

• OS: [e.g. iOS] iOS
• Browser [e.g. chrome, safari] safari
• Version [e.g. 22] latest

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context

• Please add the version of Gutenberg you are using in the description.
• To report a security issue, please visit the WordPress HackerOne program: https://hackerone.com/wordpress.

[ZebulanStanphill]

There have been a lot of changes to the toolbar lately. Is this issue still relevant?

[designsimply]

Tested and confirmed using WordPress 4.9.8 and Gutenberg 4.2.0-rc.1 with iPhone 6S running iOS 12.0.1 that the toolbars appear below blocks on mobile.

^{Seen at http://alittletestblog.com/wp-admin/post.php?post=13999&action=edit using iPhone 6S running iOS 12.0.1.}

Notes: if you tap at the top of a long block, the toolbar can become obscured. I noticed the movers are missing for floated images (reported at #11454).

[mtias]

@jasmussen @karmatosed can you look at this one please?

[jasmussen]

I need additional information here, because although I agree this feels odd compared to how it looks on desktop, sadly this implementation is a technical necessity. Reason 1: If you longpress to select text to make it bold, the bold button if above the text will be obscured by the mobile copy paste popout menu. Reason 2: we cannot fix the toolbar to the top due to the gory technical reasons outlined here: #7479 (comment)

As such, what you see on mobile right now is intentional, and the best we can do within the boundaries of Mobile Safari. I would again encourage reading through #7479 (comment) in depth, because that comment outlines how we want to make it better, but we really can't yet.

[jasmussen]

Closing this one as intentional pending changes to Mobile Safari. See #7479 (comment).