In block editor when block is at top of window the block tools / settings dialog is hidden by "Editor top bar"

[ritterml]

In block editor when block is at top of window and I activate the block tools / settings dialog it overflows "Editor content" and is hidden by "Editor top bar".

[praveenkum1102]

Hey,
I tried to reproduce this issue to attach some screenshots but was unable to do so.
Below, I have attached the steps I used to reproduce the issue and a video for reference.

Environment:
WordPress: 6.5.3 | 6.4
PHP: 8.1
Browser: Chrome 125
OS: macOS

Theme: Twenty Twenty-Four

Expected Result due to Bug: According to the bug report, I should have seen the block toolbar or the extra options panel in the block toolbar overflow the page when triggered for the topmost block on the page.

Actual Result: Upon testing, I found that this is not the case. The block toolbar does not overflow the page while the block is within the viewport. The toolbar only goes out of the editor when the block itself is out of view, which is expected behaviour.

Steps Used for Testing:

1. Log In & Navigate: Log in to WordPress and open the post editor.
2. Add Content: Add enough blocks to make the page scrollable.
3. Scroll to Top: Scroll so a block is at the top of the editor window.
4. Select Block: Click the block to display its toolbar and check for overflows.
5. Open Settings: Click the three dots in the toolbar to open the block settings dialogue and check for overflows.

Video:
​https://www.dropbox.com/scl/fi/7dmd1wvicbvt75sv674qa/2024-05-27-16-57-00.mp4?rlkey=xi2n8dimj1us67bmfgr5hj13n&st=f5dpjw3g&dl=0

[r1k0]

Reproduction Report

Environment

• WordPress: 6.9
• PHP: 8.4.17
• Server: PHP.wasm
• Database: WP_SQLite_Driver (Server: 8.0.38 / Client: 3.51.0)
• Browser: Chrome 144.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty-Five 1.4
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.1

Steps taken

1. Add a post, and add enough content to make the page scrollable.
2. Scroll down so that the top block is at the top of the editor window.
3. Click the block, and observe the positioning of the toolbar.
4. Scroll back up, and observe the toolbar moves to the top of the block as soon as there is enough space to fit.
5. While the toolbar is at the top of the block, open the block options by clicking the "three-dot" button.
6. Scroll down, and observe the position of the block toolbar and the options menu.
7. ❌ Bug is not occurring

Expected behavior

• The block toolbar switches positions to the bottom side of the block if the space at the top of the block is enough to fit.

Additional Notes

• The options menu is the only thing that overflows (over the editor toolbar) as a user scrolls past the selected block.

Screencast:

• ​https://files.catbox.moe/7k1kwd.webm