[$40] Make toastr messages always visible

[maxceem]

Follow up issue from https://github.com/topcoder-platform/micro-frontends-taas-admin-app/issues/82#issuecomment-896643567 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.

[sandhiyakavi]

Verified on Dev env.

[maxceem]

Challenge https://www.topcoder.com/challenges/38b1552b-380b-4326-b222-7b0497b5858e has been created for this ticket.

This is an automated message for maxceem via Topcoder X

[maxceem]

Challenge https://www.topcoder.com/challenges/38b1552b-380b-4326-b222-7b0497b5858e has been assigned to madopcode.

This is an automated message for maxceem via Topcoder X

[maxceem]

Payment task has been updated: https://www.topcoder.com/challenges/38b1552b-380b-4326-b222-7b0497b5858e Payments Complete Winner: madopcode Copilot: maxceem Challenge 38b1552b-380b-4326-b222-7b0497b5858e has been paid and closed.

This is an automated message for maxceem via Topcoder X

[sandhiyakavi]

Verified on Prod Env. Working as expected.

cc: @nkumar-topcoder