Gutenberg: Navigation block item breaks on mobile

[draganescu]

Describe the bug
When inserting or editing a navigation item on mobile, the toolbar of the menu item breaks on multiple lines.

Expected behavior
It should stick to the bottom of the navigation menu block instead of being anchored to the navigation menu item.

Screenshots

Smartphone (please complete the following information):

• Device: IPhone Simulator

[getdave]

It should stick to the bottom of the navigation menu block instead of being anchored to the navigation menu item.

@draganescu This relates to

https://github.com/WordPress/gutenberg/pull/18336#issuecomment-551880816

@mtias is there any precedent for this behaviour for nested Blocks' toolbars?

[karmatosed]

@shaunandrews looping you in for this as my feelings are we might have to simplify things or at least look at stopping overlaps.

[shaunandrews]

At the _very least_ the Link UI needs to better adjust on mobile screens—perhaps a modal overlay, instead of the positional popover.

In the screenshots above, it seems like some of the spacing and positioning of the toolbar is just plain broken. This doesn't appear to be a problem specific to the Navigation block (though it is definitely impacted) and is more related to nested blocks in general — the toolbar tries to respect the nested paddings/margins.

Instead, I think the toolbar should always be positioned to the left edge of small viewports and likely full-width.

[frontdevde]

I just had a brief look at the issue and what seems to happen is the following:

On other blocks, we make use of absolute positioning for the toolbar to appear below the block. That works well for the main toolbar of this block as well but breaks down for the toolbar on the individual items:

That is because for the individual items there are now a few different elements in between that set position relative. We could reset those to the initial state on mobile. That would somewhat work but it breaks down the moment the user would click the button to toggle the item position. The issue there is that the transform creates a new stacking context. So the item changes position during the animation and then jumps to full width the moment the animation stops:

With this in mind, what would probably be the most straightforward solution, for now, is to make each of the menu items full width on mobile. This way each block stretches over the full width and the toolbar can just be positioned at the bottom of the menu item just as with any other block.

[draganescu]

make each of the menu items full width on mobile.

Interesting exploration @frontdevde, thank you! I believe this idea above is a good approach since usually navigation at mobile phone breakpoints is indeed stacked.

[frontdevde]

We're working on the mobile toolbar over in https://github.com/WordPress/gutenberg/pull/18686. This is what the navigation block looks like on mobile with the current state of that PR.

So if we can land the changes we're attempting to make to the mobile toolbar in general, this should also fix the UX issues we're seeing with the navigation block submenu toolbars.

[frontdevde]

Fixed by #18686