[graphiql] Unable to scroll parent container when hovering the query editor or query result

[cperotAxway]

Is there an existing issue for this?

• I have searched the existing issues

Current Behavior

When graphiql component is used in a context where there are other elements in the page it's not possible to scroll the parent element when hovering the query editor or the query result panel. This is coming from the fact that monaco editor stop the propagation of the scroll event.
Monaco editor expose an option to allow to not stop the scroll events:

options={{
scrollbar: {
alwaysConsumeMouseWheel: false
}
}}

The consequence is really not user friendly as the user doesn't understand why he cannot scroll as usual.

when hovering the query editor and query result, the parent / main page scroll should scroll after the scroll in editor reach the top or the end.

Expected Behavior

The top parent container should scroll after the internal editor finished to scroll.

Steps To Reproduce

Use the graphiql component in this context:

This is a content

and render the Graphiql in the graphiql-container div.

Then hover the query editor and scroll up.

The page doesn't scroll to the top

Environment

• GraphiQL Version: 5.2.2
• OS: Linux
• Browser: Chrome
• Bundler: webpack
• react Version: 18
• graphql Version: 15.5.1

Anything else?

No response