adding in columns for responsive layout

frontend/src/components/breadcrumb/index.js

@@ -1,4 +1,6 @@
 const Container = require('@ui/components/container');
+const Row = require('@ui/components/row');
+const Column = require('@ui/components/column');
 const PropTypes = require('@root/prop-types');
 const React = require('react');
 const ReactRouter = require('react-router');
@@ -78,15 +80,19 @@ const Breadcrumb = ({
 }) => {
   return (
     <Container>
-      <StyledDiv>
-        <H1
-          style={{
-            fontSize: remcalc(24)
-          }}
-        >
-          {getNameLink(name)}
-        </H1>
-      </StyledDiv>
+      <Row>
+        <Column xs={12}>
+          <StyledDiv>
+            <H1
+              style={{
+                fontSize: remcalc(24)
+              }}
+            >
+              {getNameLink(name)}
+            </H1>
+          </StyledDiv>
+        </Column>
+      </Row>
     </Container>
   );
 };

frontend/src/components/empty/services.js

@@ -28,21 +28,21 @@ module.exports = () => (
       </Column>
     </Row>
     <Row>
-      <Button>
-        <FormattedMessage id='edit-project-manifest' />
-      </Button>
-    </Row>
-    <Row>
-      <P>
-        <FormattedMessage id='or-bring-in-from' />
-      </P>
-    </Row>
-    <Row>
-      <Column>
-        <Button secondary>GitHub</Button>
+      <Column xs={12}>
+        <Button>
+          <FormattedMessage id='edit-project-manifest' />
+        </Button>
       </Column>
-      <Column>
+    </Row>
+    <Row>
+      <Column xs={12}>
+        <P>
+          <FormattedMessage id='or-bring-in-from' />
+        </P>
+
+        <Button secondary>GitHub</Button>
         <Button secondary>BitBucket</Button>
+
       </Column>
     </Row>
   </div>

frontend/src/components/section/index.js

@@ -1,12 +1,18 @@
 const React = require('react');
 const ReactIntl = require('react-intl');
 const ReactRouter = require('react-router');
+const Styled = require('styled-components');
 
 const Li = require('@ui/components/horizontal-list/li');
+const constants = require('@ui/shared/constants');
 const PropTypes = require('@root/prop-types');
 const Ul = require('@ui/components/horizontal-list/ul');
 const Breadcrumb = require('@components/breadcrumb');
 
+const {
+  default: styled
+} = Styled;
+
 const {
   FormattedMessage
 } = ReactIntl;
@@ -15,6 +21,22 @@ const {
   Link
 } = ReactRouter;
 
+const {
+  breakpoints,
+} = constants;
+
+const StyledHorizontalList = styled(Ul)`
+  ${breakpoints.smallOnly`
+    padding: 0
+  `}
+`;
+
+const StyledHorizontalListItem = styled(Li)`
+  ${breakpoints.smallOnly`
+    display: block;
+  `}
+`;
+
 const Section = (props) => {
   const {
     children,
@@ -22,19 +44,19 @@ const Section = (props) => {
   } = props;
 
   const navLinks = links.map((link) => (
-    <Li key={link.name}>
+    <StyledHorizontalListItem key={link.name}>
       <Link activeClassName='active' to={link.pathname}>
         <FormattedMessage id={link.name} />
       </Link>
-    </Li>
+    </StyledHorizontalListItem>
   ));
 
   return (
     <div>
       <Breadcrumb {...props} />
-      <Ul>
+      <StyledHorizontalList name="project-nav">
         {navLinks}
-      </Ul>
+      </StyledHorizontalList>
       {children}
     </div>
   );

frontend/src/containers/services/index.js

@@ -6,6 +6,8 @@ const PropTypes = require('@root/prop-types');
 const ServiceItem = require('@components/service-item');
 const selectors = require('@state/selectors');
 
+const Row = require('@ui/components/row');
+const Column = require('@ui/components/column');
 const {
   connect
 } = ReactRedux;
@@ -35,10 +37,12 @@ const Services = ({
   ));
 
   return (
-    <div>
-      {empty}
-      {serviceList}
-    </div>
+    <Row>
+      <Column xs={12}>
+        {empty}
+        {serviceList}
+      </Column>
+    </Row>
   );
 };
 

ui/src/components/button/index.js

@@ -65,7 +65,7 @@ const borderRadius = match({
 // based on bootstrap 4
 const style = css`
   box-sizing: border-box;
-  display: flex;
+  display: inline-block;
   justify-content: center;
   align-items: center;
 

ui/src/components/row/index.js

@@ -59,6 +59,7 @@ module.exports = styled.div`
 
   margin-left: ${margin};
   margin-right: ${margin};
+  min-width: 100%;
 
   flex-direction: ${direction('xs')};
   justify-content: ${justify('xs')};

ui/src/shared/constants/breakpoints.js

@@ -23,7 +23,7 @@ const screen = 'only screen';
 
 const screens = {
   // >= 768px
-  'small-only': `${screen} and (max-width: ${small.upper})`,
+  'smallOnly': `${screen} and (max-width: ${small.upper})`,
   'small': `${screen} and (min-width: ${small.upper}})`,
   // >= 1024px
   'medium-only': `${screen} and (min-width: ${medium.lower})