diff --git a/frontend/src/components/article/index.js b/frontend/src/components/article/index.js index 716d9914..80e3b68a 100644 --- a/frontend/src/components/article/index.js +++ b/frontend/src/components/article/index.js @@ -3,7 +3,7 @@ const constants = require('@ui/shared/constants'); const { colors, - sizes + breakpoints } = constants; const { @@ -13,6 +13,9 @@ const { // Main Contonent Wrapper Styles module.exports = styled.article` background-color: ${colors.base.grey}; - - ${sizes.sm} + padding: 2rem; + + ${breakpoints.large` + padding: 0; + `} `; diff --git a/frontend/src/components/header/index.js b/frontend/src/components/header/index.js index d884abd4..17d309e8 100644 --- a/frontend/src/components/header/index.js +++ b/frontend/src/components/header/index.js @@ -44,6 +44,7 @@ const StyledLogo = styled.img` const StyledProfileWrapper = styled.div` position: relative; + text-align: right; `; const StyledAvatarWrapper = styled.div` @@ -116,12 +117,12 @@ const Header = ({ - + - + diff --git a/ui/src/components/container/index.js b/ui/src/components/container/index.js index c6c53d67..e23e7727 100644 --- a/ui/src/components/container/index.js +++ b/ui/src/components/container/index.js @@ -28,14 +28,14 @@ module.exports = styled.div` ${fluid} ${breakpoints.small` - width: ${sizes.containerSm || '46rem'}; + max-width: ${sizes.containerSm || '46rem'}; `} ${breakpoints.medium` - width: ${sizes.containerMd || '61rem'}; + max-width: ${sizes.containerMd || '61rem'}; `} ${breakpoints.large` - width: ${sizes.containerLg || '71rem'}; + max-width: ${sizes.containerLg || '71rem'}; `} `;