Buttons overlapping on smaller screens

[ghost]

Buttons overlapping on smaller screens

Issue:

The buttons "Create shifts" and "Invite Talent to JobCore" overlap on top of the calendar, as seen in the picture below. This only happens when the screen size is smaller than the full desktop size.

For reference, these two buttons exist on the "Dashboard" page.

Solution:

A developer should change the display of the buttons when the screen is smaller. It is recommended to use bootstrap, version 4.1, for the in-line styling display of the buttons.

Solution Steps:

1. Since the buttons belong to the "ButtonBar" component, we recommend exploring this page: /workspace/employer-web-client/src/js/views/ButtonBar.jsx and search how it arrives to the Dashboard page.
2. Try to see if the two buttons can be removed from the button bar, to be moved into the vertical grid of the page, but still keep its functionality (calling the right-side bar to create shifts and invite people).
3. Run all the tests provided in the repo to make sure that your integration was successful.
4. Create a pull request so that your code can be evaluated by the Lead Developer before deployment.
5. Keep an eye out for any new bugs that arise after the change is deployed to the code.