[admin-ui] Dropdowns are often clipped

[michaelbromley]

The clr-dropdown we are using does not detect the edges of the viewport or overlapping divs which causes it to get clipped and become unusable. This is a known issue from the Clarity team and there is an open issue aimed at re-working the whole underlying popover mechanism to fix this: vmware-archive/clarity#2923

However, this task is marked as "post 2.0" (2.0 is currently in RC), so it may be a little while before this is resolved.

For the admin UI this is quite an important issue, as in certain cases a menu will become unusable.

Proposal: re-implement with Angular CDK

The Angular CDK provides an overlay module which will dynamically re-position an element to ensure it is always visible.

It should therefore be possible to use this overlay module to re-implement the subset of the clr-dropdown API using the markup and CSS of the Clarity lib: https://v1.clarity.design/dropdowns