From 8f7818432330899e710f22447084927690a285e3 Mon Sep 17 00:00:00 2001
From: Krishna Muppaneni <4703366+krishnamuppaneni@users.noreply.github.com>
Date: Fri, 5 Apr 2024 07:57:33 -0500
Subject: [PATCH] Fix ping indicators floating above header in board
 customization page (#1998)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🐛 fix indicators floating above header
---
 src/components/Board/Customize/Layout/LayoutPreview.tsx | 1 +
 src/components/layout/header/Header.tsx                 | 7 +++----
 src/widgets/media-requests/MediaRequestStatsTile.tsx    | 1 +
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/Board/Customize/Layout/LayoutPreview.tsx b/src/components/Board/Customize/Layout/LayoutPreview.tsx
index ecae8cc6f..9f771a31d 100644
--- a/src/components/Board/Customize/Layout/LayoutPreview.tsx
+++ b/src/components/Board/Customize/Layout/LayoutPreview.tsx
@@ -114,6 +114,7 @@ const PlaceholderElement = ({ height, width, showPing, index }: PlaceholderEleme
         size={5}
         offset={10}
         color={index % 4 === 0 ? 'red' : 'green'}
+        zIndex={0}
       >
         <BaseElement width={width} height={height} />
       </Indicator>
diff --git a/src/components/layout/header/Header.tsx b/src/components/layout/header/Header.tsx
index a584e7e64..baedc29a8 100644
--- a/src/components/layout/header/Header.tsx
+++ b/src/components/layout/header/Header.tsx
@@ -1,5 +1,4 @@
 import {
-  Anchor,
   Box,
   Center,
   Flex,
@@ -8,11 +7,11 @@ import {
   Text,
   Title,
   UnstyledButton,
-  useMantineTheme,
+  useMantineTheme
 } from '@mantine/core';
 import { useMediaQuery } from '@mantine/hooks';
 import { IconAlertTriangle } from '@tabler/icons-react';
-import { Trans, useTranslation } from 'next-i18next';
+import { useTranslation } from 'next-i18next';
 
 import { Logo } from '../Common/Logo';
 import { AvatarMenu } from './AvatarMenu';
@@ -44,7 +43,7 @@ export const MainHeader = ({
     : headerBaseHeight;
 
   return (
-    <Header height={headerHeight} pb="sm" pt={0}>
+    <Header height={headerHeight} pb="sm" pt={0} style={{ zIndex: 200 }}>
       <Group spacing="xl" mt="xs" px="md" position="apart" noWrap>
         <Group noWrap style={{ flex: 1 }}>
           {leftIcon}
diff --git a/src/widgets/media-requests/MediaRequestStatsTile.tsx b/src/widgets/media-requests/MediaRequestStatsTile.tsx
index d1a692460..155eef8d0 100644
--- a/src/widgets/media-requests/MediaRequestStatsTile.tsx
+++ b/src/widgets/media-requests/MediaRequestStatsTile.tsx
@@ -156,6 +156,7 @@ function MediaRequestStatsTile({ widget }: MediaRequestStatsWidgetProps) {
                       left={8}
                       size={15}
                       ml={-5}
+                      zIndex={1}
                       color={user.app === 'overseerr' ? '#ECB000' : '#6677CC'}
                       processing={mediaFetching || usersFetching}
                       children