Web UI: Query action menu overflows below footer

[eamansour]

Describe the bug

If you have a sidebar full of saved queries and you try to delete the very last query, the action menu overflows below the footer and forces you to scroll down to see the "Delete" button, which can be frustrating.

It would be good if the menu didn't overflow below the footer and instead popped up in view of the user.

See below for a visual example of this:

Steps to reproduce

1. Add lots of saved queries
2. Go to the last saved query and open the action menu
3. Notice the overflowing menu

Expected behavior

The action menu shouldn't overflow and all options should be visible without having to scroll to see them.

• Disable scroll while dropdown is open
• Calculate the y coordinate of the menu and position dropdown upwards or downwards based on this y height (can't use element number of the saved query as it could have been scrolled to the bottom)
• Add confirmation message and button for "Delete" action

[James-Cocker]

Thoughts:
Ideal solution should have a dropdown unless it causes the website to scroll past the footer. Simple fix would be to always put menu overflow items to the top, but this would mean accidental deletions might become common. It could be argued that the overflow menu sometimes directed upwards, then other times downwards might cause more confusion.

Solution:
It would not be too difficult to detect if container was overflowing and query was in the bottom 5 or so, but even these criteria are not enough. For example, if the container is just about to overflow but isn't yet (see below).
Another scenario where this wouldn't work is if you had a very long list of saved queries, then simply scrolled to the top of the list and opened the last visible item in the scrollable list. This would clearly not be in the bottom 5 elements of the entire list, but would still cause a malfunction.