added scrolling for user dashboard

Author: eddypjr

app/src/Dashboard/styles.css

@@ -1,73 +1,72 @@
 /* @import url('https://fonts.googleapis.com/css2?family=Cabin&family=Oswald&display=swap');
 
 
+
 $primary-black: #22292f;
 $secondary-black: #606f7b;
 $teriary-grey: #f0f0f0;
 $light-grey: #bfcbd4;
 $light-blue: #759cc9;
 $button-blue: #24BCFF; */
-
+body, html {
+  position: relative;
+  height: 100%;
+}
 .form , .project{
-  display: flex;
-  flex-direction: column;
-  background-color: white;
-  border: 1px solid  #f0f0f0;
-  box-shadow: 0 0 5px rgba(0,0,0,0.3);
-  margin: 5px;
+  width: 22vw;
+  height: 38vh;
+  background:white;
+  margin: 1% 1%;
   border-radius: 5px;
-  color: #606f7b;
-  align-items: center;
-  height: 35vh;
-  /* justify-content: min; */
-  width: 15%;
-  overflow: scroll;
+  box-shadow: 0 0 5px rgba(0,0,0,0.3);
+  text-align: center;
+  position: relative;
+  border: 1px solid  #f0f0f0;
+  overflow: auto;
+  /* border: 2px solid blue; */
 }
 
-/* .dashboardContainer {
-  display: grid;
-  grid-template: auto / repeat(2, 1fr);
-} */
-
 .formContainer , .projectContainer{
+  border-radius: 5px;
+  width: 100vw;
+  height: 40vh;
+  position: relative;
+  margin: 0 auto;
+  overflow-y: scroll;
+  z-index: 5;
   display: flex;
+  flex-direction: column-reverse;
   flex-flow: row wrap;
+  justify-content: flex-start;
+  /* border: 2px solid red; */
 }
 
-.project {
-  position: relative;
-}
-
-.projectInfo {
-  text-align: center;
+.headers {
+  border: 1px solid black;
 }
 
 .commentArea {
-  /* position: absolute; */
-  bottom: 0;
-  display: inline-block;
   width: 100%;
-  height: 100%;
+  position: relative;
   text-align: center;
-  /* height: 25%; */
-  overflow: scroll;
   overflow-x: hidden;
+  overflow-y: scroll;
+
+  /* border: 2px solid purple; */
 }
 
 .commentBox {
   padding: 5%;
   width: 100%;
-  border: 1px solid transparent;
-  /* vertical-align: middle; */
+  border: 1px solid #f0f0f0;
 }
 
 .commentButton{
-  /* float: right; */
-  top: 22%;
+  top: 25%;
   right: 5%;
   position: absolute;
-  padding-top: 2%;
-  padding-bottom: 2%;
+  border: 1px solid transparent;
+  background-color: white;
 }
 
 .renderedCom {
@@ -78,7 +77,7 @@ $button-blue: #24BCFF; */
   position: absolute;
   bottom: 0;
   width: 100%;
-  border: 1px solid #f0f0f0;
+  /* border: 2px solid green; */
 }
 
 .icons {
@@ -88,17 +87,13 @@ $button-blue: #24BCFF; */
   align-items: center;
 }
 
-/* .formContainer {
-  display: flex;
-  flex-direction: row;
-  width: 100%;
-  height: 100%;
+h1 {
+  text-align: center;
 }
 
-.projectContainer {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  width: 100%;
-} */
+.deleteProject {
+  background-color: transparent;
+  position: absolute;
+  right: 0;
+  border: 1px solid transparent;
+}