Fixed issue Misalignment of suggestion details widget (https://github.com/microsoft/monaco-editor/issues/3373)

[GenericTSDeveloper]

The offset position of the suggest-widget container is calculated relative to the editor (i.e. position is set as absolute)
On the other hand, the offset position of suggest-detail container is relative to the viewport (i.e. position is set as fixed).

Per stated in the issue, there are some cases where offset are not properly calculated for the suggest-detail container. If the parent or ancestors of monaco-editor has either transform or perspective style set, then offset position will NOT be relative to the viewport (https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block#4)

One solution is to calculate the offset for the suggest-detail container relative to the editor (and set the position as absolute).

Since the position is set to absolute, (in the editor.css) the position: relative; must be removed in order to have suggest-detail-container shown properly (otherwise it will act as if it has low z-index) 

fixes microsoft/monaco-editor#3373

[GenericTSDeveloper]

@microsoft-github-policy-service agree

[jrieken]

Since the position is set to absolute, (in the editor.css) the position: relative; must be removed in order to have suggest-detail-container shown properly (otherwise it will act as if it has low z-index)

That will cause UI glitches like this one 👇. I'd prefer another solution that is less risky

[jrieken]

@rebornix Please take a look at this and follow up (either here or separately) for notebooks. This PR changes the suggest details to not be fixed but positioned absolute. This makes sure details always stick to the suggestions list. For that we introduced editor overlay widgets that are allowed to overflow (this is similar to already existing overflow-allowed content widgets).

I see that for the latter some notebook/suggest specific CSS magic is applied. This won't work for suggest details anymore because they now sit inside a different node but I also couldn't get this to work with similar tweaks

⬆️ notice how the details overflow the editor but now the editor-overflow doesn't overflow the notebook

[jrieken]

@GenericTSDeveloper pushed a few changes on top of yours. Thanks for starting this, I am confident that we will get this merged towards the end of this week

[rebornix]

@jrieken The absolute positioned widgets will always run into this issue due to how layering works, it gets cut off at the boundary of the list view. That's also why we intentionally enable fixedOverflowWidgets https://github.com/GenericTSDeveloper/vscode/blob/8e3ae234e4b94b0f41eba2807df7afb014691895/src/vs/workbench/contrib/notebook/browser/viewModel/cellEditorOptions.ts#L29-L30 for the cell editors, which ensure all widgets are fixed. Can we check this setting and control if the widget should be fixed or absolute? This way we can have it for normal text editor and still use fixed widgets when embedding monaco editor in absolute divs.

[jrieken]

Thanks @rebornix. I have now pushed support for fixed overflow overlay widgets. This works now for notebooks too.