[Bug] Missalignment of suggestion details widget

[scebotari66]

Reproducible in vscode.dev or in VS Code Desktop?

• Not reproducible in vscode.dev or VS Code Desktop

Reproducible in the monaco editor playground?

Yes

Monaco Editor Playground Link

https://microsoft.github.io/monaco-editor/playground.html?source=v0.41.0#XQAAAAK3CAAAAAAAAABBqQkHQ5NjdMjwa-jY7SIQ9S7DNlzs5W-mwj0fe1ZCDRFc9ws9XQE0SJE1jc2VKxhaLFIw9vEWSxW3yscxENr3d8FMVJpPoRyBdi9M1_G4fz_GHkPnDw5FYv-hVPgAMoHABKlIQi4n62ngTJKgw_lB7UqM528p93eRQnjoQEYDROpybsGpmMY30rRB_zqBBRr2P8BcL6VoRPcFBP8vuHFMmQBIvpZ30h3mwtJjTJARuemYc_E2vVnPno_tjKO1C3WL07AMeVx1e4tyY0vHYHawRhyPTybHclOE6_I0gd0P4buT5vwdjeILuwtYKNzuShe7SaMw8x8puQGut6HYseICrym1wro7mpFbSu_T7R7skYT0_L5xafyGBsAuSn8HiAro1jsfIADWhKSdC42ENKJ0RCMBGoKlix_DYs2xXKqOfZMPNSKOWDkUdoOGSOAw9DpEL1VvU5JQQTsQQ28nn48G4TeOgy0ynwqZIRhSCi6kmBV__5i2cB1TeOOPKkQ7p6ALq4lNZd4HV5IcDk21AupS28ioiTDEJ01uyY8Fq5vmqPMaq6G4Y-FrsQ4ybeLtEA99N_CK4xpxgDvr9kQpCwcDBvltBUVbAGZK85dLn6D5EpRI2ABqXpfjxTAIqndQ8G_9EQDRogRyG6K_QJVs0_hUjcI6cuBT6I0J3jUfLb9XvQKWnFnNxoWYtFIeyq8ZqXTD7X30dD8HuRQ8sIhGeYCjrYfg_GVCcvRW41fVteuTe2BaMTHlX6afsXEOIZcmMtvBR6BfRfpVrv2U1tNYGcHL6MgU3atV3tFoEuYvOmWyoi74kbRetavf34ZwdUwFV2ataL3RotMX9Bq6WJwNqllg9m-5tABWmz26mxI5IqYZeP4QeKZNSG3lgAsG3Qv-HoeCRDC9-rt_-tqg_0J2xPdLiQeOyXxbVQwgFZ7Gdhj7xnKRzVxleOMDSW4Dg-5k0_zn4oXpYLBYh4jgo85IhcI5eaAcSRgDgenx_d6rw7q6PM_t7Gm5Y3PqwM9oTn4GUruLgY8dU6Nm9zhQ6PPSj0aGYdNqltpgrZTYIe7rWwnkjH9r_nKQei9iyV5DDgqS4qsIvI1cnA9uunHhDnWSgGs6N_NeevwhAi90HmkBErHYEHY4KnjfBozG-RLqT1FM8xxl3sl7vt_KegGw1kiAINzHoA2yJZMM4gb1fCizrNuCl03NTBZGLPCHKQR2kxTknGlUwkUG-PDwrtB91XFIJPCR4P_nDersmN0tThTjpXwd2dKlfjQJxI3_dQEKAA

Thanks @LyqXMU

Reproduction Steps

Inside the "dependencies" object type lodash.
After the suggestion appears, click on the "Read more" arrow to see the suggestion's documentation.

Actual (Problematic) Behavior

The suggestion details widget is not aligned correctly

Expected Behavior

The suggestion details widget should be aligned below the suggestions widget

Additional Context

The root cause of the problems lies in the fact that the suggestion details widget has fixed css value for position.
And it assumes that it is positioned relative to the viewport. But this is not always the case (see related issues #2503 and #2793).

Excerpt from MDN web docs (emphasis mine) regarding fixed positioning:

The element is removed from the normal document flow, and no space is created for the element in the page layout. It is positioned relative to the initial containing block established by the viewport, except when one of its ancestors has a transform, perspective, or filter property set to something other than none (see the CSS Transforms Spec), or the will-change property is set to transform, in which case that ancestor behaves as the containing block.

So when you have an ancestor element with one of the mentioned properties that forms a containing block, the suggestion details widget gets misaligned.

The problems exists also for the suggestions widget if fixedOverflowWidgets is enabled (see mentioned related issues). But by default the suggestions widget is absolute positioned. And you can also use the overflowWidgetsDomNode to place the elements outside so that fixed will be relative to the viewport.

You don't have such options for the suggestion details widget.

[kristw]

I just run into a similar issue for the hints when fixedOverflowWidgets is enabled.

[whitemiaool]

+1

[YemreGurses]

+1

[LyqXMU]

+1

[hediet]

Please update the playground example to include a link to an example where it reproduces. Thanks!

[LyqXMU]

Please update the playground example to include a link to an example where it reproduces. Thanks!

Playground Link:
https://microsoft.github.io/monaco-editor/playground.html?source=v0.41.0#XQAAAAK3CAAAAAAAAABBqQkHQ5NjdMjwa-jY7SIQ9S7DNlzs5W-mwj0fe1ZCDRFc9ws9XQE0SJE1jc2VKxhaLFIw9vEWSxW3yscxENr3d8FMVJpPoRyBdi9M1_G4fz_GHkPnDw5FYv-hVPgAMoHABKlIQi4n62ngTJKgw_lB7UqM528p93eRQnjoQEYDROpybsGpmMY30rRB_zqBBRr2P8BcL6VoRPcFBP8vuHFMmQBIvpZ30h3mwtJjTJARuemYc_E2vVnPno_tjKO1C3WL07AMeVx1e4tyY0vHYHawRhyPTybHclOE6_I0gd0P4buT5vwdjeILuwtYKNzuShe7SaMw8x8puQGut6HYseICrym1wro7mpFbSu_T7R7skYT0_L5xafyGBsAuSn8HiAro1jsfIADWhKSdC42ENKJ0RCMBGoKlix_DYs2xXKqOfZMPNSKOWDkUdoOGSOAw9DpEL1VvU5JQQTsQQ28nn48G4TeOgy0ynwqZIRhSCi6kmBV__5i2cB1TeOOPKkQ7p6ALq4lNZd4HV5IcDk21AupS28ioiTDEJ01uyY8Fq5vmqPMaq6G4Y-FrsQ4ybeLtEA99N_CK4xpxgDvr9kQpCwcDBvltBUVbAGZK85dLn6D5EpRI2ABqXpfjxTAIqndQ8G_9EQDRogRyG6K_QJVs0_hUjcI6cuBT6I0J3jUfLb9XvQKWnFnNxoWYtFIeyq8ZqXTD7X30dD8HuRQ8sIhGeYCjrYfg_GVCcvRW41fVteuTe2BaMTHlX6afsXEOIZcmMtvBR6BfRfpVrv2U1tNYGcHL6MgU3atV3tFoEuYvOmWyoi74kbRetavf34ZwdUwFV2ataL3RotMX9Bq6WJwNqllg9m-5tABWmz26mxI5IqYZeP4QeKZNSG3lgAsG3Qv-HoeCRDC9-rt_-tqg_0J2xPdLiQeOyXxbVQwgFZ7Gdhj7xnKRzVxleOMDSW4Dg-5k0_zn4oXpYLBYh4jgo85IhcI5eaAcSRgDgenx_d6rw7q6PM_t7Gm5Y3PqwM9oTn4GUruLgY8dU6Nm9zhQ6PPSj0aGYdNqltpgrZTYIe7rWwnkjH9r_nKQei9iyV5DDgqS4qsIvI1cnA9uunHhDnWSgGs6N_NeevwhAi90HmkBErHYEHY4KnjfBozG-RLqT1FM8xxl3sl7vt_KegGw1kiAINzHoA2yJZMM4gb1fCizrNuCl03NTBZGLPCHKQR2kxTknGlUwkUG-PDwrtB91XFIJPCR4P_nDersmN0tThTjpXwd2dKlfjQJxI3_dQEKAA

Reproduction Steps

Input 'lo', and click the arrow to show details

[denny99]

I can confirm this issue. With the fixed overflow widgets, its totally misaligned