diff --git a/frontend/src/components/breadcrumb/index.js b/frontend/src/components/breadcrumb/index.js
index d02ea708..08d488b7 100644
--- a/frontend/src/components/breadcrumb/index.js
+++ b/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 (
-
-
- {getNameLink(name)}
-
-
+
+
+
+
+ {getNameLink(name)}
+
+
+
+
);
};
diff --git a/frontend/src/components/empty/services.js b/frontend/src/components/empty/services.js
index 0c210aa5..f09ee66f 100644
--- a/frontend/src/components/empty/services.js
+++ b/frontend/src/components/empty/services.js
@@ -28,21 +28,21 @@ module.exports = () => (
-
-
-
-
-
-
-
-
-
-
+
+
-
+
+
+
+
+
+
+
+
+
diff --git a/frontend/src/components/section/index.js b/frontend/src/components/section/index.js
index 848aa4be..6c7dc88c 100644
--- a/frontend/src/components/section/index.js
+++ b/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) => (
-
+
-
+
));
return (
);
diff --git a/frontend/src/containers/services/index.js b/frontend/src/containers/services/index.js
index cc0c1c78..8eb3bdeb 100644
--- a/frontend/src/containers/services/index.js
+++ b/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 (
-
- {empty}
- {serviceList}
-
+
+
+ {empty}
+ {serviceList}
+
+
);
};
diff --git a/ui/src/components/button/index.js b/ui/src/components/button/index.js
index ba027867..5f0d2611 100644
--- a/ui/src/components/button/index.js
+++ b/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;
@@ -95,7 +95,7 @@ const style = css`
border: solid ${remcalc(1)} ${border};
box-shadow: ${boxes.bottomShaddow};
-
+
&:focus {
outline: 0;
text-decoration: none;
diff --git a/ui/src/components/row/index.js b/ui/src/components/row/index.js
index 1d2bbc09..e3abecf0 100644
--- a/ui/src/components/row/index.js
+++ b/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')};
diff --git a/ui/src/shared/constants/breakpoints.js b/ui/src/shared/constants/breakpoints.js
index 2a899bd7..4c8de37d 100644
--- a/ui/src/shared/constants/breakpoints.js
+++ b/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})