Loading z-index is higher than slideout panel

[robbieaverill]

Looks weird. The panel should be on top.

[kvisca]

@robbieaverill can we close this based on the interaction on #475?

[robbieaverill]

Nah it still needs to be resolved. This screenshot is an example of standard component use from the UI library and it shouldn't overlap like this. I closed #475 because there was a difference of opinion on how to fix this, but haven't spent any time on investigating whether we can remove the z-index from the Loading component yet. I think that's the way forward though - let the implementor decide what z-indexes will work for each use case (if they need to at all)

[ScopeyNZ]

Ultimately we should probably have a documented z-index strategy. Different levels should have different purposes. For example:

• z-0 (none): Normal content
• z-10: Sectional loading indicators
• z-20: Panels and modals
• z-30: Toasts and banner alerts
• z-40: Full page loading indicators

We could even rename the z- options in tailwind to be clear on the use of each z index, so you'd do something like @apply z-modal for modals.

[ScopeyNZ]

As Robbie mentioned, sectional loading indicators shouldn't actually have z-index, but it might be a bit of a job to do that, as then the loading indicator MUST appear after the content it overlays in the DOM.