[Dashboards] Hovering over a panel when any control popover open causes hover and panel actions to superimpose on comtrols weirdly

[bhavyarm]

Kibana version: main/serverless-qa

Browser version: chrome latest

Browser OS version: OS X

Original install method (e.g. download page, yum, from source, etc.): from QA

Describe the bug: Hover and panel actions superimpose on controls if controls popover is open.

Steps to reproduce:

1. Add a couple of controls to dashboard (can be both range and options controls)
2. Add a couple of panels to dashboard
3. Click on the control so either the options list or slider for range is open
4. Hover over the panel below control
5. The hover and panel actions for the panel are on top of the controls.

[elasticmachine]

Pinging @elastic/kibana-presentation (Team:Presentation)

[mbondyra]

One more example with unified search bar:

[Heenawter]

These are all to be expected. I think we could close this, since we need the hover actions to overlap the sticky section of the dashboard, and I don't think we want to hide them on scroll because this could be annoying. What do you think @cqliu1 @andreadelrio?

[cqliu1]

We should consider fixing #197897 as well when tackling this UI bug.

[andreadelrio]

My recommendation is the following:

Not sure about the code implications but UX wise I think this would get us a clean behavior.

[Heenawter]

Seems like we can implement @andreadelrio's suggestion with something like this: https://css-tricks.com/styling-based-on-scroll-position/ (and the code complexity is minimal)

[nreese]

@andreadelrio

I like your suggestion of putting the hover actions below the dashboard tool bar when scrolling.