Fix ping indicators floating above header in board customization page (#1998)

🐛 fix indicators floating above header

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>

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}

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