Fixed header title position

src/components/Layout/Layout.js

@@ -38,13 +38,13 @@ class Layout extends React.Component {
           <LoadingIndicator />
         ) : null }
         <div className={ cx(styles.header, { fixed: this.props.fixed }) }>
-          <div className={ styles.teamName }>
+          <div className={ styles.headerLeft }>
             <Link to="/">{ store.team.name }</Link>
           </div>
           <Flex align="center" className={ styles.title }>
             { this.props.title }
           </Flex>
-          <Flex direction="row">
+          <Flex direction="row" className={ styles.headerRight }>
             <Flex align="center" className={ styles.actions }>
               { this.props.actions }
             </Flex>

src/components/Layout/Layout.scss

@@ -10,8 +10,10 @@
 
 .header {
   display: flex;
-  justify-content: space-between;
+  justify-content: space-around;
   align-items: center;
+
+  position: relative;
   padding: 0 20px;
 
   height: $headerHeight;
@@ -36,12 +38,28 @@
   }
 }
 
-.teamName a {
-  font-family: 'Atlas Grotesk';
-  font-weight: bold;
-  color: $textColor;
-  text-decoration: none;
-  font-size: 16px;
+.headerLeft {
+  display: flex;
+  align-items: center;
+
+  position: absolute;
+  left: 20px;
+  top: 0;
+  bottom: 0;
+
+  a {
+    font-family: 'Atlas Grotesk';
+    font-weight: bold;
+    color: $textColor;
+    text-decoration: none;
+    font-size: 16px;
+  }
+}
+
+.headerRight {
+  position: absolute;
+  right: 20px;
+  margin-top: -1px;
 }
 
 .content {