From dcbb2119272d59da66745058a9d7aedd513e2527 Mon Sep 17 00:00:00 2001
From: Alex Windett <windettalex@gmail.com>
Date: Tue, 28 Feb 2017 15:29:36 +0000
Subject: [PATCH] adding in overflow scroll for mobile org tabs

---
 frontend/src/components/navigation/org.js | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/navigation/org.js b/frontend/src/components/navigation/org.js
index b6b18095..81611cdd 100644
--- a/frontend/src/components/navigation/org.js
+++ b/frontend/src/components/navigation/org.js
@@ -9,6 +9,7 @@ import { colors } from '@ui/shared/constants';
 import PropTypes from '@root/prop-types';
 import { orgsSelector } from '@state/selectors';
 import { remcalc } from '@ui/shared/functions';
+import { breakpoints } from '@ui/shared/constants';
 import Tabs, { Tab } from '@ui/components/tabs';
 
 
@@ -55,7 +56,21 @@ const NavLi = styled(NavLink)`
 `;
 
 const StyledTabs = styled(Tabs)`
-  padding-top: ${remcalc(12)}
+  padding-top: ${remcalc(12)};
+  
+  ${breakpoints.smallOnly`
+    display: inline-block;
+    white-space: nowrap;
+  `}
+`;
+
+const StyledContainer = styled(Container)`
+
+  ${breakpoints.smallOnly`
+    overflow: scroll;
+    display: flex;
+    
+  `}
 `;
 
 const OrgNavigation = ({
@@ -94,11 +109,11 @@ const OrgNavigation = ({
 
   return (
     <StyledNav>
-      <Container>
+      <StyledContainer>
         <StyledTabs name='organisation-navigation-group'>
           {navLinks}
         </StyledTabs>
-      </Container>
+      </StyledContainer>
     </StyledNav>
   );
 };