fix(job): content align center

Author: mydearxym

containers/JobContent/index.js

@@ -23,7 +23,9 @@ import SideCards from './SideCards'
 
 import {
   Wrapper,
+  InnerWrapper,
   MainWrapper,
+  SidebarWrapper,
   ArticleWrapper,
   BodyHeaderWrapper,
   CommentsWrapper,
@@ -45,7 +47,7 @@ const JobContentContainer = ({ jobContent }) => {
   return (
     <Wrapper>
       <Maybe test={viewingData.id}>
-        <React.Fragment>
+        <InnerWrapper>
           <MainWrapper>
             <ArticleWrapper>
               <BodyHeaderWrapper>
@@ -73,10 +75,13 @@ const JobContentContainer = ({ jobContent }) => {
               <Comments ssr />
             </CommentsWrapper>
           </MainWrapper>
-          <Affix offsetTop={30}>
-            <SideCards data={viewingData} />
-          </Affix>
-        </React.Fragment>
+
+          <SidebarWrapper>
+            <Affix offsetTop={30}>
+              <SideCards data={viewingData} />
+            </Affix>
+          </SidebarWrapper>
+        </InnerWrapper>
       </Maybe>
     </Wrapper>
   )

containers/JobContent/styles/index.js

@@ -3,25 +3,31 @@ import styled from 'styled-components'
 import { theme, cs } from '@utils'
 
 export const Wrapper = styled.article`
-  ${cs.flex()};
+  ${cs.flex('justify-center')};
   padding: 20px;
   min-height: 300px;
   ${cs.media.tablet`
     padding: 8px 0;
   `};
 `
+export const InnerWrapper = styled.div`
+  ${cs.flex()};
+  width: 100%;
+  max-width: ${cs.MAX_CONTENT_WIDTH};
+  padding: 0 6vw;
+  ${cs.media.desktop`
+    padding: 0 4vw;
+  `};
+`
 export const MainWrapper = styled.div`
-  width: 68%;
-  margin-left: 2.5rem;
   ${cs.media.tablet`
     width: 100%;
-    margin-left: 0;
   `};
 `
+export const SidebarWrapper = styled.div``
 /* background: ${theme('preview.articleBg')}; */
 export const ArticleWrapper = styled.div`
   font-size: 1.1rem;
-  margin-left: 2vw;
   margin-right: 1.6vw;
   background: ${theme('preview.articleBg')};
   border-radius: 5px;
@@ -39,11 +45,12 @@ export const BodyHeaderWrapper = styled.div`
   margin-bottom: 18px;
 `
 export const CommentsWrapper = styled.div`
-  margin-top: 30px;
-  margin: 25px;
+  margin: 30px 0;
+  margin-right: 25px;
+
   ${cs.media.tablet`
-margin: 10px;
-`};
+    margin: 10px;
+  `};
 `
 
 export const MobileWrapper = styled.div`

containers/JobsThread/index.js

@@ -22,8 +22,6 @@ import PublishNote from './PublishNote'
 
 import {
   Wrapper,
-  LeftPadding,
-  RightPadding,
   LeftPart,
   RightPart,
   FilterWrapper,
@@ -65,7 +63,6 @@ const JobsThreadContainer = ({ jobsThread }) => {
 
   return (
     <Wrapper>
-      <LeftPadding />
       <LeftPart>
         <Waypoint onEnter={inAnchor} onLeave={outAnchor} />
         <Maybe test={showFilterBar}>
@@ -108,7 +105,6 @@ const JobsThreadContainer = ({ jobsThread }) => {
           />
         </Affix>
       </RightPart>
-      <RightPadding />
     </Wrapper>
   )
 }

containers/JobsThread/styles/index.js

@@ -5,22 +5,16 @@ import { cs } from '@utils'
 
 export const Wrapper = styled.div`
   ${cs.flex()};
-  max-width: 1400px;
   width: 100%;
 `
-export const LeftPadding = styled.div`
-  width: 4vw;
-`
-export const RightPadding = styled.div`
-  width: 4vw;
-`
 export const LeftPart = styled.div`
   flex-grow: 1;
   width: 100%;
 `
 export const RightPart = styled.div`
-  width: 20vw;
+  min-width: 200px;
   margin-left: 30px;
+  padding-top: 5px;
   ${cs.media.tablet`display: none`};
 `
 /* fill: ${theme('shell.searchIcon')}; */