Dropdown menu doesn't take viewport bounds into consideration.

[vic-georgiev]

The drop-down should take into account the viewport bounds. Right now it is positioned via static CSS and gets cut at the end of the project grid.

Current:

Expected:
The menu would show on top of the click target when the viewport bounds would clip it with standard position.

Desired behavior: https://reactstrap.github.io/components/dropdowns/ - check the menu when the trigger (button) is very close to the browser borders.

Another example is https://tympanus.net/codrops/2013/05/23/tooltip-menu/; check the demo.

Ideally the solution for positioning the dropdown menu would be the same used for displaying tooltips.

Requirement - follow TC SCSS/HTML/JS best practices.

[maxceem]

As a quick solution, I propose to make the next. When we click in the top half of the screen - open dropdown down. If we click in the bottom half of the screen - open dropdown up, check video http://take.ms/QJfs5

To make it work more elegant way when it's open up only if it cannot fit down it's better to use some existent implementation of dropdown as there are a lot of edge cases usually.