minor cleanup for dashboard view

1 files changed, 20 insertions, 13 deletions

diff --git a/src/client/views/DashboardView.scss b/src/client/views/DashboardView.scss
index 90f64b393..25feca7bf 100644
--- a/src/client/views/DashboardView.scss
+++ b/src/client/views/DashboardView.scss
@@ -1,31 +1,39 @@
 @import './global/globalCssVariables.module';
 
+$dashboard-left-menu-width: 250px;
+$dashboard-view-padding: 20px;
+$dashboard-container-height: 200px;
+$dashboard-container-width: 250px;
+
 .dashboard-view {
-    padding: 50px;
     display: flex;
     flex-direction: row;
     width: 100%;
-    position: absolute;
     height: 100%;
-    width: 100%;
-    padding-right: 0px;
+    position: absolute;
     overflow: auto;
 
     .left-menu {
         display: flex;
         justify-content: flex-start;
         flex-direction: column;
-        width: 250px;
-        min-width: 250px;
+        position: fixed;
+        min-width: $dashboard-left-menu-width;
         gap: 5px;
+        padding: $dashboard-view-padding;
     }
 
     .all-dashboards {
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
-        overflow-y: auto;
         width: 100%;
+        height: fit-content;
+        justify-content: flex-start;
+        align-items: flex-start;
+        padding: $dashboard-view-padding 0px 0px $dashboard-left-menu-width;
+        gap: 10px;
+        margin-bottom: 60px;
     }
 }
 
@@ -48,13 +56,12 @@
 
 .dashboard-container-new {
     border-radius: 10px;
-    width: 250px;
-    height: 200px;
+    width: $dashboard-container-width;
+    height: $dashboard-container-height;
     font-size: 120px;
     font-weight: 100;
     text-align: center;
     border: solid 2px $light-gray;
-    margin: 0 0px 30px 30px;
     cursor: pointer;
     color: $light-gray;
     display: flex;
@@ -82,12 +89,12 @@
     border-radius: 10px;
     position: relative;
     cursor: pointer;
-    width: 250px;
-    height: 200px;
+    width: $dashboard-container-width;
+    height: $dashboard-container-height;
     outline: solid 2px $light-gray;
+    outline-offset: -2px;
     display: flex;
     flex-direction: column;
-    margin: 0 0px 30px 30px;
     overflow: hidden;
 
     &:hover {