add assemble flow responsiveness

src/components/projects/ProjectsHeader.jsx

@@ -45,8 +45,7 @@ const useStyles = makeStyles(({
     padding: '1rem'
   },
   flowImage: {
-    gridColumn: '13 / 48',
-    paddingLeft: '1em'
+    gridColumn: '14 / 36'
   },
   cardMainFont: {
     fontSize: '24px'
@@ -61,6 +60,13 @@ const useStyles = makeStyles(({
   },
   primary: {
     color: primary[500]
+  },
+  listedProjects: {
+    gridColumn: '1 / 49',
+    textAlign: 'center',
+    fontSize: '20px',
+    fontWeight: 'bold',
+    marginTop: '3rem'
   }
 
 }))
@@ -135,6 +141,7 @@ function ProjectsHeader() {
       <div className={classes.flowImage}>
         <AssembleFlow />
       </div>
+      <Typography className={classes.listedProjects}>Listed Projects</Typography>
     </Fragment>
   )
 }

src/components/projects/styles/ListProjects.js

@@ -20,7 +20,7 @@ const useStyles = makeStyles(theme => ({
   main: {
     display: 'grid',
     gridTemplateColumns: 'repeat(48, [col] 1fr)',
-    gridTemplateRows: '4rem 4rem auto 0.5fr 1fr 0.3fr'
+    gridTemplateRows: '4rem 4rem auto auto 6rem'
   },
   title: {
     fontSize: '2rem',
@@ -128,7 +128,7 @@ const useStyles = makeStyles(theme => ({
   tableHeader: {
     color: 'rgba(147, 155, 161, 0.8)',
     fontSize: '0.9rem',
-    gridRow: '5 / 6'
+    gridRow: '6 / 7'
   },
   headerName: {
     gridColumn: '3 / 12'