Merge pull request #1343 from Shoaibdev7/fix/navigation-tooltip

Fix Navigation `Tooltip` Appearing Behind Other Components

Author: humansinstitute

src/components/common/SidebarComponent.tsx

@@ -43,6 +43,7 @@ const SidebarContainer = styled.div<{ collapsed: boolean }>`
   overflow: hidden;
   position: fixed;
   height: 100vh;
+  z-index: 1000;
   left: 0;
   top: 0;
   background: #f4f4f4;
@@ -296,7 +297,6 @@ const Tooltip = styled.div<{ visible: boolean; top: number; collapsed: boolean }
   opacity: ${(props) => (props.visible ? 1 : 0)};
   visibility: ${(props) => (props.visible ? 'visible' : 'hidden')};
   transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
-  z-index: 9999;
   white-space: nowrap;
   top: ${(props) => props.top}px;
   pointer-events: none;

src/people/main/Header.tsx

@@ -490,7 +490,8 @@ function Header() {
           width: '100%',
           height: 64,
           padding: '0 20px',
-          background: headerBackground
+          background: headerBackground,
+          zIndex: 1001
         }}
       >
         <div