Popovers getting hidden behind code cells in VSCode notebook renderers

[divyansshhh]

I have a notebook renderer which creates a popover on click of a button, this popover gets hidden behind the code cells. Here's a screenshot of a minimal reproducer -

I have created a simple reproducer to demo this issue - https://github.com/divyansshhh/popover-vscode-reproducer. Is there a way to render the popover above the code cells?

Does this issue occur when all extensions are disabled?: Yes

• VS Code Version: 1.81.0
• OS Version: RHEL 8

Steps to Reproduce:

1. Clone - https://github.com/divyansshhh/popover-vscode-reproducer
2. Open it in VSCode Insiders
3. Hit F5 to run.

[divyansshhh]

Can we get some update here? This is quite important for our use case.

[krassowski]

I can reproduce this with:

Version: 1.84.0-insider
Commit: 60182c7e1a666961ded4d0319c154f52d85daf30
Date: 2023-10-30T23:41:47.806Z

It seems that the output layer gets attached to the windowing container (monaco-list-rows) as first child, which makes it appear underneath all other cells. Bumping z-index on the parent of the outputs iframe to 100 fixes the popup appearance but then it makes all the cells non-intractable via mouse as pointer events get captured by the outputs iframe.

A workaround could be propagation of events not handled by the outputs iframe body back to the parent document (which will need two hops).

[krassowski]

Hi @DonJayamanne I saw that you previously opened a related issue and commented on a similar one in the other repository:

• https://github.com/microsoft/vscode/issues/108947
• https://github.com/microsoft/vscode-jupyter/issues/6899

It would benefit users if the popover/tooltip widgets in outputs which work in Jupyter Notebook and JupyterLab also worked in VSCode; it also seems to come up quite regularly. Does the solution proposed above (moving the output layers up the stacking context and manually propagating events) makes sense/sounds feasible?

On unrelated note please let me know if you would like me to help with finishing the custom kernel message serializer PR - I can find some time to add a test case you asked about :)

[amunger]

As mentioned in this comment on that linked issue, this isn't something that we know how to support currently - each output has its own viewport, and elements from within that viewport need to stay within the boundaries.

[krassowski]

@amunger what do you think about the idea of bumping the stacking index of output layer and adding event propagation from the output iframe back to the viewport? Would you be open to reviewing a pull request that would implement this?

[amunger]

I wouldn't want to add something that could cause more instability to notebooks/outputs, and that solution sounds like adding another point of failure.

[krassowski]

Makes sense. I guess an alternative would be mounting the modal node to a node higher up in the DOM tree, which will require more work to position it relative to the output correctly. Is it possible for the extensions to access both a container to mount at the notebook/viewport level and track the position of output node in the iframe to achieve this?