style: DatasourceControl dropdown z-index issue

[ktmud]

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

[issue-label-bot]

Issue-Label Bot is automatically applying the label #bug to this issue, with a confidence of 0.93. Please mark this comment with 👍 or 👎 to give our bot feedback!

Links: app homepage, dashboard and code for this bot.

[junlincc]

@kgabryje 🙏

[kgabryje]

I think it's going to solve itself when I refactor react-bootstrap dropdowns to Antd

[zuzana-vej]

Similar to #11377 (these are the only two cosmetic / overflow issues I am aware of).

cc @junlincc

[kgabryje]

@ktmud @zuzana-vej @junlincc #11395 should fix the issue.

[mistercrunch]

Merged, and confirmed this is fixed in master: