increasing z-index for tooltip to ensure its above all content

frontend/src/components/header/index.js

@@ -47,9 +47,9 @@ const StyledAvatarWrapper = styled.div`
 `;
 
 const StyledTooltipWrapper = styled.div`
-  position: absolute;
   right: ${remcalc(-18)};
   bottom: ${remcalc(-140)};
+  position: absolute;
 `;
 
 const StyledName = styled.span`

ui/src/components/tooltip/index.js

@@ -1,5 +1,10 @@
 import { remcalc } from '../../shared/functions';
-import { baseBox, pseudoEl, Baseline } from '../../shared/composers';
+import {
+  baseBox,
+  pseudoEl,
+  Baseline,
+  moveZ
+} from '../../shared/composers';
 import { colors } from '../../shared/constants';
 import styled from 'styled-components';
 import React from 'react';
@@ -8,7 +13,6 @@ const ItemPadder = 9;
 const WrapperPadder = 24;
 
 const StyledList = styled.ul`
-  position: relative;
   background: ${colors.base.white};
   color: ${colors.base.text};
   display: inline-block;
@@ -19,9 +23,12 @@ const StyledList = styled.ul`
   min-width: ${remcalc(200)};
 
   ${props => props.styles}
-
   ${baseBox()}
   
+  ${moveZ({
+    amount: 1
+  })}
+
   & > * {
 
     padding: ${remcalc(ItemPadder)} ${remcalc(WrapperPadder)};