style: fix align issues when content has few words

also footer bottom align

Author: mydearxym

containers/Footer/styles/bottom_info.js

@@ -12,6 +12,7 @@ export const Wrapper = styled.div`
 `
 export const InnerWrapper = styled.div`
   ${cs.flex('justify-between')};
+  align-items: center;
   width: 100%;
   max-width: ${cs.MAX_CONTENT_WIDTH};
   padding: 0 5vw;

containers/JobContent/styles/index.js

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { theme, cs } from '@utils'
 
 export const Wrapper = styled.article`
-  ${cs.flex('justify-center')};
+  ${cs.flexGrow('justify-center')};
   padding: 20px;
   min-height: 300px;
   ${cs.media.tablet`
@@ -20,6 +20,7 @@ export const InnerWrapper = styled.div`
   `};
 `
 export const MainWrapper = styled.div`
+  flex-grow: 1;
   ${cs.media.tablet`
     width: 100%;
   `};
@@ -34,7 +35,7 @@ export const ArticleWrapper = styled.div`
   background: ${theme('preview.articleBg')};
   border-radius: 5px;
   padding: 35px 40px;
-  min-height: 60vh;
+  min-height: 200px;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
 
   ${cs.media.tablet`
@@ -60,7 +61,7 @@ export const MobileWrapper = styled.div`
   ${cs.flexColumn('align-center')};
   display: none;
   ${cs.media.tablet`
-${cs.flex()};
+    ${cs.flex()};
   `};
 `
 export const MobileContentCard = styled.div`

containers/PostContent/styles/index.js

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { theme, cs } from '@utils'
 
 export const Wrapper = styled.article`
-  ${cs.flex('justify-center')};
+  ${cs.flexGrow('justify-center')};
   padding-top: 20px;
   min-height: 300px;
 
@@ -21,6 +21,8 @@ export const InnerWrapper = styled.div`
   `};
 `
 export const MainWrapper = styled.div`
+  flex-grow: 1;
+
   ${cs.media.tablet`
     width: 100%;
   `};
@@ -36,6 +38,7 @@ export const ArticleWrapper = styled.div`
   border-radius: 5px;
   padding: 35px 40px;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+  min-height: 200px;
   ${cs.media.mobile`
     padding: 30px 20px;
     min-height: 20vh;

containers/RepoContent/styles/index.js

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { theme, cs } from '@utils'
 
 export const Wrapper = styled.article`
-  ${cs.flex('justify-center')};
+  ${cs.flexGrow('justify-center')};
   padding: 20px;
   min-height: 300px;
   ${cs.media.tablet`
@@ -20,6 +20,7 @@ export const InnerWrapper = styled.div`
   `};
 `
 export const MainWrapper = styled.div`
+  flex-grow: 1;
   ${cs.media.tablet`
     width: 100%;
   `};
@@ -34,7 +35,7 @@ export const ArticleWrapper = styled.div`
   background: ${theme('preview.articleBg')};
   border-radius: 5px;
   padding: 35px 40px;
-  min-height: 60vh;
+  min-height: 200px;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
   ${cs.media.tablet`
     padding: 30px 20px;

containers/VideoContent/styles/index.js

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import { theme, cs } from '@utils'
 
 export const Wrapper = styled.article`
-  ${cs.flex('justify-center')};
+  ${cs.flexGrow('justify-center')};
   padding: 20px;
   min-height: 300px;
   ${cs.media.tablet`
@@ -20,6 +20,7 @@ export const InnerWrapper = styled.div`
   `};
 `
 export const MainWrapper = styled.div`
+  flex-grow: 1;
   ${cs.media.tablet`
     width: 100%;
   `};