Wp-calypso: Editor toolbar doesn't follow currently selected block when scrolling the page, with Veggie theme installed

[ciampo]

Steps to reproduce

Tested on both simple and atomic, and it happens on both

1. Install the Veggie theme
2. Edit a post in the block editor
3. Without scrolling the page, select a block — the toolbar should be in view
4. Scroll the page down — the toolbar doesn't follow the current block, but instead, it scrolls out of the way

What I expected

The toolbar should always appear on top of the block that is currently being edited

What happened instead

The toolbar scrolls away from the block currently being edited. It seems that the further the page is scrolled down, the further the toolbar scrolls away from the current block.

Browser / OS version

MacOS 10.15.6 — Chrome 85, Firefox 81, Safari 14

Screenshot / Video

Original bug report video

Additional recording

Context / Source

Reported by @davipontesblog

[cathymcbride]

Number 85 most used theme with >1300 installs

[davipontesblog]

User report on #3345765-zen for feedback loop when this gets resolved.

[yansern]

This particular issue seems to be fixed when using fixed positioning on .components-popover.block-editor-block-list__block-popover.

However, since Gutenberg uses absolute positioning by default, my suspicion would be finding which parent element has a position: relative set to it when it shouldn't.

[ciampo]

I spent some more time investigating the issue, and I think I found the culprit by inspecting the editor

But the problem is that I can’t find this CSS rule in the Veggie source files: I looked into style-editor.css, but the contents of that file seem to be different from what is injected in the <style> tag when using the editor (see the second screenshot)

Maybe it’s a caching issue? @cathymcbride Do you know who would know something about this?

[cathymcbride]

@ciampo I'm not sure I do? @ianstewart can you perhaps point us in a direction here?