Address bottom navigation interfering with elements stuck to the bottom

[toiletgranny]

Description

With introducing elements stuck to the bottom of the viewport recently, issues with the bottom navigation interfering with those elements have become apparent.

Examples:

• https://github.com/Joystream/atlas/pull/2430#pullrequestreview-941213424
• https://github.com/Joystream/atlas/pull/2435

This task aims to find a systemic solution to this problem.

Figma link

https://www.figma.com/file/Pf31tuYpozYmpq163U2ho8/Web-components?node-id=3173%3A136439

How urgent this is?

Not a blocker, but still worth considering

[dmtrjsg]

@toiletgranny do we need to test all navigation and fish out similar cases? Or is this raised with a view to pre-empt any future clashes.

[toiletgranny]

It's more the latter. However, @rafalpawlow, haven't you created a systemic solution already, a while ago? Do I remember it right? If so, @kdembler, can we stick to it? If yes, I'd just need to make sure to document that in Figma for both designers and engineers, for future reference.

[rafalpawlow]

@toiletgranny I'm not sure we're talking about the same, but few months ago I created a solution for the following scenario, cookie banner + bottom nav. It shifts cookie banner whenever bottom nav is visible. It can be easily implemented for other elements, sice we keep state of bottom nav globally.

[toiletgranny]

Well, @dmtrjsg, then if using the above globally is something that @kdembler is okay with, then all I need is about an hour to document this in Figma and whatever the tech team needs to make it work.

[kdembler]

Sure, but probably low prio