make projectContainer scrollable

Author: khuongdn16

app/src/Dashboard/Project.tsx

@@ -144,16 +144,16 @@ const Project = ({
   // If user clears their workspace, then their components are removed from state and the modal is closed
   const clearWorkspace = () => {
     //Deletes project from the database
-  const handleDelete = (e) => {
-    e.preventDefault();
-    const myVar = {
-      variables:
-      {
-        projId: id,
-      },
-    };
-    deleteProject(myVar);
-  }
+    const handleDelete = (e) => {
+      e.preventDefault();
+      const myVar = {
+        variables:
+        {
+          projId: id,
+        },
+      };
+      deleteProject(myVar);
+    }
 
     // Set modal options
     const children = (
@@ -194,17 +194,18 @@ const Project = ({
 
   return (
   <div className = 'project'>
+    <div className = 'header'>
     { currUsername === username ?
-      <IconButton tooltip = "Delete Project" onClick={ clearWorkspace } style={{position: 'absolute', right: '0', padding: '0'}}>
+      <IconButton tooltip = "Delete Project" onClick={ clearWorkspace } style={{position: 'absolute', right: '0'}}>
         <CloseIcon/>
       </IconButton>
-    : '' }
-    <div className = 'header'>
+      : '' }
       <div className = 'projectInfo'>
         <h2>Project: { name }</h2>
         <h3>Author: { username }</h3>
         <h3>Likes: { likes }</h3>
       </div>
+
       <div className = "icons">
           <IconButton tooltip="Like Template" style={noPointer} onClick = { handleLike }>
             {clicked ? <StarIcon fontSize='Large' style={{color:'#FFD700'}}/> : <StarBorderIcon fontSize='Large' style={{color:'#FFD700'}}/>}
@@ -213,29 +214,22 @@ const Project = ({
           <IconButton tooltip ="Download Template" style={noPointer} onClick={ handleDownload }>
             <GetAppIcon fontSize="large" className="download"/> 
           </IconButton>       
-        : '' }
+          : '' }
         { currUsername === username ?
           <IconButton tooltip ="Publish Template" style={noPointer} onClick={ handlePublish }>
             <PublishIcon fontSize="large"/> 
           </IconButton>
           : '' }
       </div>
     </div>
-  <hr/>
-    { published ? 
-      <div className = "commentArea">
+      <div className = "commentContainer">
           {recentComments}
-          <br/>
-          <div className = 'comments'>
-            <span>
-              <input type="text" placeholder="Add Comment" onChange={ handleChange } className = "commentBox"></input>
-              <AddCommentIcon fontSize='Large' onClick={ handleComment } style={{top: '22%', right: '5%', position: 'absolute', paddingTop: '2%', paddingBottom: 
-            '2%'}}/>
-            </span>
-          </div>
       </div>
-   : '' }
-   {modal}
+      <div className = 'commentInput'>
+        <input type="text" placeholder="Add Comment" onChange={ handleChange }></input>
+        <AddCommentIcon className='commentBtn' fontSize='Large' onClick={ handleComment } style={{position: 'absolute', right: '0', top: '10px'}}/>
+      </div>
+  {modal}
   </div>
   );
 };

app/src/Dashboard/styles.css

@@ -21,57 +21,49 @@ $button-blue: #24BCFF; */
   align-items: center;
   height: 40vh;
   /* justify-content: min; */
-  width: 25%;
-  overflow: scroll;
+  width: 30%;
+  /* overflow: scroll; */
 }
 
-/* .dashboardContainer {
-  display: grid;
-  grid-template: auto / repeat(2, 1fr);
-} */
 
 .dashboardContainer {
-  overflow: scroll;
+  /* overflow: scroll; */
+  height: 100%;
 }
 
-.formContainer , .projectContainer{
+ .projectContainer{
   display: flex;
   flex-flow: row wrap;
-  overflow: scroll;
+  height: 600px;
+  overflow-y: scroll;
 }
 
 .project {
-  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  height: 500px;
+  width: 400px;
+  justify-content:  space-between;
 }
 
 .projectInfo {
   text-align: center;
 }
 
-.commentArea {
-  /* position: absolute; */
-  bottom: 0;
-  display: inline-block;
-  width: 100%;
-  height: 100%;
+.commentContainer {
   text-align: center;
-  /* height: 25%; */
-  overflow: scroll;
-  overflow-x: hidden;
+  height: 400px;
+  overflow-y: scroll;
 }
 
-.commentBox {
-  padding: 5%;
-  width: 100%;
-  border: 1px solid transparent;
-  /* vertical-align: middle; */
-}
+
 
 .commentButton{
   /* float: right; */
-  top: 22%;
+  /* top: 22%;
   right: 5%;
-  position: absolute;
+  position: absolute; */
   padding-top: 2%;
   padding-bottom: 2%;
 }
@@ -84,11 +76,16 @@ $button-blue: #24BCFF; */
   text-align: center;
 }
 
-.comments {
-  position: absolute;
-  bottom: 0;
+.commentInput {
+  display: flex;
+  height: 100px;
   width: 100%;
   border: 1px solid #f0f0f0;
+  position: relative;
+}
+
+.commentInput > * {
+  flex: auto;
 }
 
 .icons {
@@ -103,18 +100,14 @@ $button-blue: #24BCFF; */
   color: rgba(255, 255, 255, 0.897);
   opacity: 0.7;
   width: 100%;
+  position: relative;
 }
-/* .formContainer {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  height: 100%;
-}
 
-.projectContainer {
+
+/* .projectContainer {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   width: 100%;
-} */
+}  */