Notes Sidebar container lacks independent mouse scrolling, freezing entirely when post content is short

[habiburdev]

Description

Following on from the structural layouts introduced in Phase 3 of the Gutenberg roadmap, this issue serves as a critical bug report for the Notes UI container architecture planned for WordPress 7.1.

The current implementation of the right-hand Notes sidebar panel lacks an independent scroll property (such as overflow-y: auto). Instead, the scroll framework inherits and binds its viewport updates entirely to the height of the main post content canvas.

• Long Content Layouts: If a post features a substantial body of text, scrolling the main editor canvas enables the sidebar to track vertically as an illusion of functional scrolling.
• Short Content Layouts: If a post contains minimal text blocks while sustaining a high volume of notes or expanded reply threads, the sidebar panel completely freezes against mouse wheel and trackpad inputs.

Reproduction Profile

1. Setup: Navigate to Posts -> Add New Post and generate a single short sentence block so the content height remains minimized.
2. Context Creation: Highlight a section of the text, open the block toolbar options (⋮), and select Add note. Repeat this step to build multiple separate notes or long reply strings until the sidebar elements visually overflow past the bottom edge of the viewport.
3. Execution: Position the mouse pointer directly within the boundary of the Notes sidebar panel and attempt a manual scroll gesture via mouse wheel or trackpad swipe.

Expected

The Notes sidebar panel should feature independent vertical viewport scrolling. Placing the cursor over the element and executing a scroll action must let the user freely browse through the active notes list, irrespective of the underlying post content canvas constraints.

Actual

The sidebar container remains completely static and locked against mouse/trackpad inputs due to the short post content blocking the window layout from triggering a scroll event. The current structural workaround requires clicking an upper visible note card to shift element focus, followed by using the keyboard's physical down arrow key to force the container to advance down.

Environment Details

• WordPress Core: 7.1-beta1
• Gutenberg Plugin: 23.5.3
• Configuration: Clean install (All extraneous plugins deactivated)
• Browsers Tested: Chrome (Latest)

---

Related / Cross-Reference:
Part of the WordPress 7.1 Notes testing cycle. This is distinct from deep reply box focus scrolling tracking in #73536; this bug targets a structural failure of global panel layout inheritance. Scoped for the tracking updates in #76316.

Step-by-step reproduction instructions

1. Setup: Navigate to Posts -> Add New Post in the WordPress dashboard and type a single short sentence block so the main content canvas height remains minimized.
2. Context Creation: Highlight a portion of the text, open the block toolbar options menu (⋮), and select Add note. Repeat this step to build multiple separate notes (or long reply strings) until the sidebar elements visually overflow past the bottom edge of the viewport.
3. Execution: Position the mouse pointer directly within the boundary of the right-hand Notes sidebar panel and attempt a manual scroll gesture via a mouse wheel or trackpad swipe.

Screenshots, screen recording, code snippet

Environment info

• WordPress Core: 7.1-beta1
• Gutenberg Plugin: 23.5.3
• Configuration: Clean install (All extraneous plugins deactivated)
• Browsers Tested: Chrome (Latest)
• OS: macOS / Windows

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

Please confirm which theme type you used for testing.

• Block
• Classic
• Hybrid (e.g. classic with theme.json)
• Not sure

[369work]

Test Report

Description

The Notes sidebar panel (.editor-collab-sidebar-panel) does not respond to mouse wheel / trackpad scroll input when the number of notes exceeds the visible viewport height and the main post content is too short to scroll on its own.

Environment

• WordPress: 7.1-beta2
• Subdirectory: No
• PHP: 8.4.23
• Server: PHP/8.4.23 (Development Server)
• Database: WP_SQLite_Driver (Server: 8.0.38 / Client: 3.53.2)
• Browser: Edge 150.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty-Five 1.5
• MU Plugins:
  • 99-studio-loader.php
• Plugins:
  • Test Reports 1.3.0

Steps to Reproduce

1. Create a new post and add a single short paragraph block (so the main content canvas stays minimal).
2. Select a portion of the text, open the block toolbar "⋮" menu, and choose "Add note". Repeat this ~10 times to build up multiple note threads until they overflow the sidebar's visible area.
3. Move the mouse cursor over the Notes sidebar panel and try to scroll with the mouse wheel / trackpad.

Expected Results

1. The Notes sidebar should scroll independently, letting the user browse through all note threads regardless of the main canvas height.

Actual Results

1. The sidebar does not respond to scroll input at all. Individual notes remain clickable/focusable, but the panel itself cannot be scrolled with the mouse wheel or trackpad.

Additional Notes

• Initially suspected overflow: hidden on .editor-collab-sidebar-panel as the cause, but disabling it via DevTools has no effect on the behavior — this rules out overflow as the root cause.
• Inspecting the DOM shows each note thread (.editor-collab-sidebar-panel__thread) carries the is-floating class and an inline top: XXXpx position, calculated relative to a --canvas-scroll CSS custom property on the container. This means note positions are driven entirely by the main editor canvas's scroll offset, not by any scroll state of the sidebar itself.
• As a result, when the canvas is too short to scroll (single short paragraph), the notes' top values never update, and there is no independent scroll mechanism to browse them.
• This looks like the same underlying architecture discussed in Overflowing Notes and visibility in the block sidebar #72507 (Overflowing Notes and visibility in the block sidebar) and Floating notes sometimes cut off at page bottom #72440 (Floating notes sometimes cut off at page bottom) — the floating-notes positioning model doesn't yet account for cases where the canvas itself provides no scroll range.

Supplemental Artifacts

bug80449.mp4

[Mamaduka]

@t-hamano, I think you had a PR related to scrolling.

[t-hamano]

I think you had a PR related to scrolling.

Yes, here it is. #73655

However, this might conflict with the floating notes, so it might be better to prioritize shipping the floating notes first.

[adamsilverstein]

I thought we had fixed this previously by matching the canvas height to the note total note height for posts where the canvas is shorter than the notes? Or is this a different issue than what we fixed?

[habiburdev]

@adamsilverstein,
The issue here is that when the post content is short and the notes are long, users aren't able to scroll down to view all the notes.

[Mamaduka]

matching the canvas height

This was removed during a large refactoring, as it was no longer needed, but that was before inline notes. We shouldn't need to restore this hack when the in-canvas floating notes ship

I think this is a low priority. While the unhappy path is reachable, I don't think it will be common in real-world cases.