From 22701b409a1bf46cd25db02c285c2d8b366fb77a Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 10 Dec 2025 15:32:09 +0000
Subject: [PATCH 1/3] Replace `z-index-global-header` instances with
 `z-index-above`, which should resolve into the same z-index stack

---
 .../js/components/fieldtypes/markdown/MarkdownFieldtype.vue | 4 ++--
 resources/js/components/global-header/Header.vue            | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue b/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
index cb8e89ce074..dc3ef69b17a 100644
--- a/resources/js/components/fieldtypes/markdown/MarkdownFieldtype.vue
+++ b/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"
diff --git a/resources/js/components/global-header/Header.vue b/resources/js/components/global-header/Header.vue
index eb98c10fc39..83270e741df 100644
--- a/resources/js/components/global-header/Header.vue
+++ b/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">
+        <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">

From 3d3c1353d22969abee0808efd431b850ea0ad002 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Wed, 10 Dec 2025 15:32:50 +0000
Subject: [PATCH 2/3] Re-calculate z-index stack

---
 resources/css/elements/base.css | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/resources/css/elements/base.css b/resources/css/elements/base.css
index 2a0f54caf9b..86ea927392c 100644
--- a/resources/css/elements/base.css
+++ b/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;

From 6a3075cb777b9f9a2edf3ef4275f56fa0eeb680e Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Thu, 11 Dec 2025 10:36:38 +0000
Subject: [PATCH 3/3] Prevent field popovers appearing above the global header

---
 resources/js/components/global-header/Header.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/global-header/Header.vue b/resources/js/components/global-header/Header.vue
index 83270e741df..6a6b16980fc 100644
--- a/resources/js/components/global-header/Header.vue
+++ b/resources/js/components/global-header/Header.vue
@@ -8,7 +8,7 @@ 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">
+    <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>