[$40] Make toastr messages always visible #95
Description
Follow up issue from #82 (comment) issue 6:
the red toastr message is not visible if the resources per page is more and the modal also is still opened which is causing confusion.
When the page has a scrollbar and we make some operations at the bottom of the page we don't see the toastr which migh lea to confusion. For example when we perform some operations like editing payment or adding additional payment and it fails, the modal would stay open but we would not know that some issue happened.
To fix it we have to make sure that toastr is always visible even if scroll down.
The perfect solution if toastr message would be sticky see demo https://react-sticky.netlify.app/#/basic (this library seems to be maintained, but maybe there is a better one which is maintained https://www.npmjs.com/package/react-sticky-el)
-
When we on top of the page we show toastr at this place
-
When we scroll a bit, we are showing it at the same place.
-
But when we scroll down and the toastr if going to be hided, we make it fixed 20px from the top.