[6.x] Remove global header z index (#13314)

Author: JayGeorge

resources/css/elements/base.css

@@ -16,11 +16,10 @@
 
     --z-index-below: -1;
     --z-index-above: 1;
-    --z-index-global-header: 2;
-    --z-index-portal: 3;
-    --z-index-draggable: 4;
-    --z-index-modal: 5;
-    --z-index-max: 6;
+    --z-index-portal: 2;
+    --z-index-draggable: 3;
+    --z-index-modal: 4;
+    --z-index-max: 5;
 
     /* Used for entry animations */
     --starting-style-transition-duration: 0.125s;

resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue

@@ -53,7 +53,7 @@
                             :is-fullscreen="false"
                             @toggle-dark-mode="toggleDarkMode"
                             @button-click="handleButtonClick"
-                            class="sticky z-(--z-index-global-header) -top-2 mb-2 [&~*]:-mt-2"
+                            class="sticky z-(--z-index-above) -top-2 mb-2 [&~*]:-mt-2"
                         />
 
                         <div class="drag-notification" v-show="dragging">
@@ -96,7 +96,7 @@
                                 <!-- Hidden input for label association -->
                                 <input v-if="id" :id="id" type="text" class="sr-only" @focus="focusCodeMirror" tabindex="-1" />
 
-                                <footer class="flex items-center justify-between bg-gray-50 dark:bg-gray-900 rounded-b-[calc(var(--radius-lg)-1px)] border-t border-gray-300 dark:border-white/10 p-1 text-sm w-full" :class="{ 'absolute inset-x-0 bottom-0 rounded-none z-(--z-index-global-header)': fullScreenMode }">
+                                <footer class="flex items-center justify-between bg-gray-50 dark:bg-gray-900 rounded-b-[calc(var(--radius-lg)-1px)] border-t border-gray-300 dark:border-white/10 p-1 text-sm w-full" :class="{ 'absolute inset-x-0 bottom-0 rounded-none z-(--z-index-above)': fullScreenMode }">
                                     <div class="markdown-cheatsheet-helper">
                                         <Button
                                             icon="markdown"

resources/js/components/global-header/Header.vue

@@ -8,11 +8,11 @@ import UserDropdown from './UserDropdown.vue';
 </script>
 
 <template>
-    <header class="h-14 bg-global-header-bg flex justify-between space-x-2 items-center text-white px-2 lg:px-4 fixed overflow-x-auto top-0 inset-x-0 z-(--z-index-global-header)">
-        <a class="c-skip-link z-(--z-index-global-header) px-4 py-2 bg-blue-800 text-sm top-2.5 left-2.25 fixed opacity-0 -translate-y-24 focus:translate-y-0 focus:opacity-100 rounded-md" href="#main">
+    <header class="h-14 bg-global-header-bg flex justify-between space-x-2 items-center text-white px-2 lg:px-4 fixed overflow-x-auto top-0 inset-x-0 z-(--z-index-above)">
+        <a class="c-skip-link z-(--z-index-above) px-4 py-2 bg-blue-800 text-sm top-2.5 left-2.25 fixed opacity-0 -translate-y-24 focus:translate-y-0 focus:opacity-100 rounded-md" href="#main">
             {{ __('Skip to sidebar') }}
         </a>
-        <a class="c-skip-link z-(--z-index-global-header) px-4 py-2 bg-blue-800 text-sm top-2.5 left-2.25 fixed opacity-0 -translate-y-24 focus:translate-y-0 focus:opacity-100 rounded-md" href="#main-content">
+        <a class="c-skip-link z-(--z-index-above) px-4 py-2 bg-blue-800 text-sm top-2.5 left-2.25 fixed opacity-0 -translate-y-24 focus:translate-y-0 focus:opacity-100 rounded-md" href="#main-content">
             {{ __('Skip to content') }}
         </a>
         <div class="dark flex items-center gap-2 text-[0.8125rem] text-white/85 w-full">