Amp-wp: Page is behind the block navigation

[miina]

Expected behavior: Page should be fully visible

[miina]

@swissspidy Are you also seeing this issue? Not sure which recent change might have influenced it.

[swissspidy]

So this looks different than in older versions?

Maybe #2383 changed something here.

[miina]

Yes, in older versions the block navigation didn't cover the active page. Right now the initial block's drag handle is covered by the block navigation so I have to rotate the block to see the drag handle and drag it. Is it different on your screen?

[swissspidy]

I see the same when I resize the window, but I don't remember exactly what it looked like on smaller screens in earlier version.

What did it look like before, was the box smaller, or just _behind_ the page (z-index regression)?

A quick improvement we could make is to change the @media (min-width: 961px) media query for the block navigation to something more like @media (min-width: 1600px) so it's hidden on smaller viewports if there's not enough space.

At some point we have to improve the UI for smaller viewports anyway.

[miina]

The box definitely was not behind the page, so I guess that either the block navigation was smaller or it was more to the left side.

The page should be centered so I doubt that the page was more to the right.

It was something like this:

Seems to be approximately 70px difference.

It does seem like the text in the block navigation cuts of quite early considering the block navigation's width, so I guess it was smaller before?

[swissspidy]

I guess that either the block navigation was smaller or it was more to the left side.

Ah, yes it was a bit more on the left side. #2383 changed that so it better aligns with the post title at the top.

I suppose we can fix some of the calc() in the CSS to account for the changed position.

It does seem like the text in the block navigation cuts of quite early considering the block navigation's width, so I guess it was smaller before?

I don't think the width changed, it's still 300px max. That cut-off is more arbitrary than anything and not related to the element width.

[swissspidy]

Testing instructions

1. Create new story
2. Resize window
3. Verify that block navigation width decreases so that it never covers the current page (unless the window is super small)

[csossi]

drag handle can still be behind block navigation:

[miina]

@csossi The text block seems to be to the left from the Page, was it like this when you added it? It shouldn't be over the left edge by default.

Note that this issue covers the default position of the blocks, if the user moves the blocks behind the block navigation then yes, it goes behind.

Previously, by default, when adding a Page, the text block was already behind the block navigation. The goal of this issue was to fix it so that it wouldn't be behind the block navigation by default.

Please confirm if you moved the block behind the block navigation or if it was already over the left edge by default.

[swissspidy]

Regarding the drag handle, it's worth pointing out that it is likely going to be removed soon in favor of a better alternative, see #2275 / #2389. That shouldn't block this ticket here.

[csossi]

Ah, my mistake - thought a moved blocked would have its drag handle "on top" of the block navigation section - Sorry about that, @miina

Verified in QA