Dropdowns in preference widget are not always properly rendered

[tortmayr]

Bug Description:

Clicking a dropdown preference in the PreferenceWidget does not show the selection overlay in certain corner cases. If the clicked dropdown is near the end of the PreferenceWidget than the overlay does not get rendered if there is not enough available space to render it. The following video demonstrates the issue:

https://github.com/eclipse-theia/theia/assets/2311075/f7b1636f-6600-43c2-bb0b-9844b9b7b51c

If there is remaining space after the preferences widget (i.e. some view is open in the bottom tab bar) everything works as expected. However, if the bottom tab bar is closed, and you try to click a dropdown at near the bottom nothing happens and the overlay widget does not get rendered.

VSCode solves this issue by rendering the overlay bottom-up if there is not enough space below:

https://github.com/eclipse-theia/theia/assets/2311075/48c5bfa0-52ac-465c-ac0d-7e59b9a3da0d

We should implement the same for Theia

Steps to Reproduce:

1. Open the preferences widget (Ctrl+,)
2. Close all bottom tabs (or move the Settings widget into the bottom tab)
3. Choose any dropdown element from the preferences widget and bring it to the bottom of the application via scrolling
4. Click the dropdown -> nothing happens and the selection overlay does not get rendered

Additional Information

• Operating System: Ubuntu 22.04
• Theia Version: 1.49.x

[msujew]

This was supposed to work, but maybe broke with https://github.com/eclipse-theia/theia/pull/12038.

[tortmayr]

Thanks for pointing out that is used to work. I was able to narrow it further down:

https://github.com/eclipse-theia/theia/pull/12038 is not the culprit for this. It works as expected for <= 1.45 but does no longer work with 1.46.

[msujew]

I see, then it was https://github.com/eclipse-theia/theia/pull/13261.