fix(repo-page): content align center

Author: mydearxym

containers/RepoContent/index.js

@@ -20,7 +20,9 @@ import RepoStatusCard from './RepoStatusCard'
 
 import {
   Wrapper,
+  InnerWrapper,
   MainWrapper,
+  SidebarWrapper,
   ArticleWrapper,
   CommentsWrapper,
   MobileWrapper,
@@ -40,7 +42,7 @@ const RepoContentContainer = ({ repoContent }) => {
   return (
     <Wrapper>
       <Maybe test={viewingData.id}>
-        <React.Fragment>
+        <InnerWrapper>
           <MainWrapper>
             <ArticleWrapper>
               <MarkDownRender body={viewingData.readme} />
@@ -60,10 +62,12 @@ const RepoContentContainer = ({ repoContent }) => {
               <Comments />
             </CommentsWrapper>
           </MainWrapper>
-          <Affix offsetTop={30}>
-            <SideCards data={viewingData} />
-          </Affix>
-        </React.Fragment>
+          <SidebarWrapper>
+            <Affix offsetTop={30}>
+              <SideCards data={viewingData} />
+            </Affix>
+          </SidebarWrapper>
+        </InnerWrapper>
       </Maybe>
     </Wrapper>
   )

containers/RepoContent/styles/index.js

@@ -3,25 +3,32 @@ 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;
@@ -35,11 +42,12 @@ export const ArticleWrapper = styled.div`
 `
 
 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/ReposThread/index.js

@@ -20,8 +20,6 @@ import Maybe from '@components/Maybe'
 
 import {
   Wrapper,
-  LeftPadding,
-  RightPadding,
   LeftPart,
   RightPart,
   FilterWrapper,
@@ -62,7 +60,6 @@ const ReposThreadContainer = ({ reposThread }) => {
 
   return (
     <Wrapper>
-      <LeftPadding />
       <LeftPart>
         <Waypoint onEnter={inAnchor} onLeave={outAnchor} />
         <Maybe test={showFilterBar}>
@@ -103,7 +100,6 @@ const ReposThreadContainer = ({ reposThread }) => {
           />
         </Affix>
       </RightPart>
-      <RightPadding />
     </Wrapper>
   )
 }

containers/ReposThread/styles/index.js

@@ -5,25 +5,20 @@ import { cs } from '@utils'
 
 export const Wrapper = styled.div`
   ${cs.flex()};
-  max-width: 1400px;
+  max-width: ${cs.MAX_CONTENT_WIDTH};
   width: 100%;
 `
 export const ViewerWrapper = styled.div`
   margin-top: -6px;
 `
-export const LeftPadding = styled.div`
-  width: 3vw;
-`
-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')}; */