fix(ui): adds high z-index to portal root (#579)

* fix(ui): adds high z-index to portal root. Undo z changes for Label, PageHeader

* chore(ui): adds comment regarding z-index stacking

* Create tiny-cooks-try.md

.changeset/tiny-cooks-try.md

@@ -0,0 +1,5 @@
+---
+"@cloudoperators/juno-ui-components": patch
+---
+
+adds very high z-index (9999) to portal root container

packages/ui-components/src/components/Label/Label.component.tsx

@@ -13,6 +13,7 @@ const labelstyles = `
   jn-transition-all 
   jn-duration-100 
   jn-ease-in-out
+  jn-z-10
 `
 
 const floatingStyles = `

packages/ui-components/src/components/PageHeader/PageHeader.component.tsx

@@ -13,7 +13,7 @@ const pageHeaderStyles = `
   jn-top-0
   jn-px-6
   jn-py-3
-  jn-z-[1]
+  jn-z-50
 `
 
 const pageHeaderInnerStyles = `

packages/ui-components/src/components/PortalProvider/PortalProvider.component.tsx

@@ -13,10 +13,12 @@ interface PortalContextType {
 }
 export const PortalContext = createContext<PortalContextType | undefined>(undefined)
 
+// ensure very high z-index on portal root element to help prevent z-stacking problems for portaled components
 const portalRootStyles: React.CSSProperties = {
   position: "absolute",
   top: "0",
   left: "0",
+  zIndex: "9999",
 }
 
 /** A hook that creates a portal container in the current portal root, and returns this newly created container as a node to use in other components:

packages/ui-components/src/deprecated_js/PortalProvider/PortalProvider.component.js

@@ -15,6 +15,7 @@ const portalRootStyles = {
   position: "absolute",
   top: "0",
   left: "0",
+  zIndex: "9999",
 }
 
 const portalStyles = {