From ff85f83da4c04b7598d3ecb88ea78b2f77b29c12 Mon Sep 17 00:00:00 2001
From: Jay George <contact@jaygeorge.co.uk>
Date: Tue, 24 Mar 2026 17:13:29 +0000
Subject: [PATCH] Set the header to relative so it appears above the
 architectural lines e.g. when creating a new nav

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

diff --git a/resources/js/components/ui/Header.vue b/resources/js/components/ui/Header.vue
index fe0d19aa907..5ccc96640cf 100644
--- a/resources/js/components/ui/Header.vue
+++ b/resources/js/components/ui/Header.vue
@@ -10,7 +10,7 @@ const props = defineProps({
 </script>
 
 <template>
-    <header class="flex flex-wrap items-center justify-between gap-4 px-2 sm:px-0 py-6 max-md:pb-8 md:py-8" data-ui-header>
+    <header class="relative flex flex-wrap items-center justify-between gap-4 px-2 sm:px-0 py-6 max-md:pb-8 md:py-8" data-ui-header>
         <h1 class="text-[25px] leading-[1.25] st-text-legibility font-medium antialiased flex items-center gap-2.5 md:flex-1">
             <!-- Wrap icon in a fixed size div (the same size as the icon) to prevent layout shift once it loads -->
             <div v-if="icon" class="size-5 relative">