the mighty z-index clean up 🧼

[RobAndrewHurst]

Description

The z-index css property is used and abused in the current codebase trying to get different elements to fit in different contexts. We can use the isolation property to correct these based on the context of where the elements are being used.

https://developer.mozilla.org/en-US/docs/Web/CSS/isolation

/* Keyword values */
isolation: auto;
isolation: isolate;

/* Global values */
isolation: inherit;
isolation: initial;
isolation: revert;
isolation: revert-layer;
isolation: unset;

We want to avoid using z-index values of 99999 as I don't know what that magic number is doing compared to 999998. It's very hard to read and extremely hard to manage different elements.