SelectComponent does not render droplist correctly when embedded in a dialog

[pchuong]

Bug Description:

I am using the SelectComponent component in a dialog, the droplist content is hidden behind the dialog area.

Steps to Reproduce:

1. Create a dialog with a SelectComponent component
2. Click on the arrow to expand the droplist option

Additional Information

The issue is that the dialog overlay has an z-index of 5000 and the select-component-container does not have any z-index set.
By providing these two CSS rules to the select-component-container element, the droplist option is show correctly within the dialog and the setting page.

.select-component-container {
    position: fixed; /* required to set z-index */
    z-index: 6000;   /* dialog overlay has a z-index of 5000 */
}

• Operating System: Windows 10
• Theia Version: 1.40