style: DatasourceControl dropdown z-index issue

When datasource name is long or browser window is small, DatasourceControl dropdown menu cut in half on narrow screens.

Expected results

The dropdown menu should be able to overflow from the side bar.

This should be fixable by adding z-index or rendering the dropdown in portal.

Another option is to right-align the dropdown menu.

Actual results

How to reproduce the bug

1. Go to Explore page
2. Select a datasource with very long name
3. Narrow your browser window
4. Click on the “…” dropdown.

Environment

(please complete the following information):

• superset version: superset version
• python version: python --version
• node.js version: node -v
• npm version: npm -v

Checklist

Make sure these boxes are checked before submitting your issue - thank you!

• I have checked the superset logs for python stacktraces and included it here as text if there are any.
• I have reproduced the issue with at least the latest released version of superset.
• [ x I have checked the issue tracker for the same issue and I haven’t found one similar.

Additional context

Not sure if this is a regression, but should be somewhat related to #10971

cc @mistercrunch

[mistercrunch]

Merged, and confirmed this is fixed in master:

[kgabryje]

@ktmud @zuzana-vej @junlincc https://github.com/apache/incubator-superset/pull/11395 should fix the issue.