Fix ToS Position Issue

[chahmedejaz]

What? Why?

• Closes [BUU] Terms of Service (ToS) can't be accepted or read when additional notification is displayed #11971

• Flash message has a higher z-index than that of the ToS banner.

• This PR ensures that the ToS banner has a higher z-index than the flash message.

Observation while addressing the issue

• It has been noticed that the z-index values used for various elements within our application are currently set without a structured approach.
• To enhance clarity and help us compare the expected stacking order based on their positions, I suggest we define these z-index values as meaningful variables in the variables.scss file in a separate issue.
• It not only improves readability but also streamlines the process of understanding the stacking order concerning specific elements with each other.

Would love to hear some thoughts on it. Thanks.

What should we test?

• Please validate the expected behavior as mentioned in the linked issue
• Along with that please make sure when ToS is being displayed, nothing should be broken on the UI in terms of the elements' position.

Release notes

Changelog Category (reviewers may add a label for the release notes):

• User facing changes
• API changes (V0, V1, DFC or Webhook)
• Technical changes only
• Feature toggled

[mkllnk]

Nice.

[rioug]

Good one!

[drummer83]

Hi @chahmedejaz,
Thanks for fixing this! 👍

After staging I could click all links and buttons on both notifications. The problem is solved. 🎉

Also, I couldn't spot any other regressions, so this one is ready to go! 🚀
Merging! Thanks again!