From 687edb9226307cb83986097abb24fe7f672e1778 Mon Sep 17 00:00:00 2001
From: ajnart <ajnart@users.noreply.github.com>
Date: Mon, 6 Jul 2026 01:50:13 +0200
Subject: [PATCH] fix(layout): raise AppShellHeader z-index above Indicator
 dots

The Mantine Indicator component (used by the Proxmox cluster health
widget for VM/LXC status dots) sits at z-index 200, which is higher
than the AppShellHeader's default 100. This caused the status dots
to bleed above the header when scrolling.

Set the header z-index to 201 so it stacks above Indicator content
without conflicting with modal/popover layers (300+).

Closes #6194
---
 apps/nextjs/src/components/layout/header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/nextjs/src/components/layout/header.tsx b/apps/nextjs/src/components/layout/header.tsx
index 32ffa81d7..e9d93f7fc 100644
--- a/apps/nextjs/src/components/layout/header.tsx
+++ b/apps/nextjs/src/components/layout/header.tsx
@@ -18,7 +18,7 @@ interface Props {
 
 export const MainHeader = ({ logo, actions, hasNavigation = true }: Props) => {
   return (
-    <AppShellHeader maw="100vw" style={{ overflowX: "hidden" }}>
+    <AppShellHeader maw="100vw" zIndex={201} style={{ overflowX: "hidden" }}>
       <Group h="100%" gap="xl" px="md" justify="apart" wrap="nowrap">
         <Group h="100%" align="center" style={{ flex: 1 }} wrap="nowrap">
           {hasNavigation && <ClientBurger />}