Style changes to fix home strand overflowing the bottom of the screen

views/dashboardPage/dashboard.css

@@ -27,15 +27,17 @@ Multi-strand use classes
 */
 .strand{
     flex-direction: column;
-    height: 100%;
+    height: 100vh;
     width: 100%;
+    padding-bottom: 25px;
+    box-sizing: border-box;
 }
 
     .strandHead{
         display: flex;
         justify-content: space-between;
         width: 100%;
-        padding: 50px 50px 0 50px;
+        padding: 10px 50px 0 50px;
         align-items: center;
         box-sizing: border-box;
     }

views/dashboardPage/home.js

@@ -137,8 +137,8 @@ window.homeStrandObj = {
             }
 
             let thisCanvas = document.getElementById("popularCanvas");
-            thisCanvas.width = thisCanvas.parentElement.offsetWidth;
-            thisCanvas.height = thisCanvas.parentElement.offsetHeight;
+            thisCanvas.width = thisCanvas.parentElement.offsetWidth * 0.8;
+            thisCanvas.height = thisCanvas.parentElement.offsetHeight * 0.8;
 
             let popularGraph = new HorizontalBarGraph(thisCanvas);
             popularGraph.addData(dataArray);

views/shared/graphs.js

@@ -259,7 +259,7 @@ class HorizontalBarGraph{
     }
 
     drawGraph(){
-        let barHeight = (this.bottom - this.top) / this.data.length;
+        let barHeight = ((this.bottom - this.top) / this.data.length) - 2;
 
         for(let i = 0; i < this.data.length; i++){
             let topLocation = this.top + (i * barHeight) + 5;