Link pop-up hidden behind block toolbar

[kathrynwp]

In WP.org forums, after publishing a comment on a review, I went back to edit a link, but was initially unable to do so, since the formatting toolbar overlaps the link pop-up.

Could we perhaps make the z-index on the link pop-up higher than the formatting toolbar? I eventually managed to work around the glitch by scrolling the window up and down a bit, and the overlap finally went away.

Moved from https://meta.trac.wordpress.org/ticket/6608#comment:67 at Dion's request

[johngodley]

Could you add a link to a post where this happens? I can't quite reproduce it in the same way as shown here.

[kathrynwp]

@johngodley sure, it was here. Thanks!

https://wordpress.org/support/topic/getting-worse-with-every-update-2/

[johngodley]

How did you get the popup to appear over the toolbar? No matter what I do the popup is always below the toolbar. Is this in a particular browser? Can you maybe include a full window screenshot for context?

[johngodley]

I've released 1.14.1 which changes the z-index of the bottom toolbar. I don't know how you've got a popover to appear over the top toolbar, but for wp.org there seems to be a specific style that sets the z-index of that one, and it might need changing there too:

/* Move the Block Editor toolbar below the Header & Also Viewing z-index bar */
.iso-editor.has-fixed-toolbar .interface-interface-skeleton__header {
	z-index: 100;
}

[kathrynwp]

Thanks, @johngodley! I recorded a screencast with audio showing how I'm getting the overlap.

How did you get the popup to appear over the toolbar?

Just to be clear, the problem is that the link popup appears under the toolbar, not over. When testing just now, the issue wasn't as severe as last time, but it still seems to me that the link popup should be on top of the toolbar, not under it. What do you think?

Firefox 108.0.2 / MacOS 2.6

forum-toolbar-overlap.mov

[johngodley]

Just to be clear, the problem is that the link popup appears under the toolbar, not over

Yes, I understand. I phrased it wrong.

it still seems to me that the link popup should be on top of the toolbar, not under it. What do you think?

Yes, of course. What you showed doesn't seem to be the same as the original problem, and the problem in your video is that the toolbar isn't sticking correctly and is in the wrong position anyway.

[kathrynwp]

What you showed doesn't seem to be the same as the original problem

Correct! I'm no longer able to replicate the original problem, as I mentioned in the recording. :D

Thank you for continuing to have a look!

[johngodley]

The original problem seems to be fixed.

The offset problem in your video is caused by the site header on wp.org changing height when the browser height is < 800px.

I've add a fix for this in #136 but it's probably something that belongs on wp.org

[kathrynwp]

@johngodley Hey there! I had the original issue happen again in this comment.

I wonder if it relates to browser window size? Mine is 1008 x 496 and it seems to happen when the post/comment is at the bottom of my screen.

Here's a screen recording:

block-editor-forum-link-popup.mov

[johngodley]

Sure, #136 has not been released yet.

[Thelmachido]

The issue described here might be related to this forum report, they also have a weird positioning of the link pop-up toolbar on WP.org forums. They said this is only happening in

• Opera version 98.0.4759.15.
• OS is Windows 11 Pro 64-bit version 22H2.