From 7eefa6972f5ae7c92fb353c74d126b5cdeed55bc Mon Sep 17 00:00:00 2001
From: Alex Andreev <alex.andreev.email@gmail.com>
Date: Fri, 12 Mar 2021 11:23:54 +0300
Subject: [PATCH] Adding vertical scrollbar to navigation

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
---
 .../components/cluster-manager/bottom-bar.scss    |  2 +-
 .../cluster-manager/cluster-manager.scss          |  2 ++
 src/renderer/components/layout/page-layout.scss   | 15 +++++++++++++--
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/cluster-manager/bottom-bar.scss b/src/renderer/components/cluster-manager/bottom-bar.scss
index a40146ad97..0f290eaf82 100644
--- a/src/renderer/components/cluster-manager/bottom-bar.scss
+++ b/src/renderer/components/cluster-manager/bottom-bar.scss
@@ -4,7 +4,7 @@
 
   background-color: var(--blue);
   padding: 0 2px;
-  height: 22px;
+  height: var(--bottom-bar-height);
 
   #current-workspace {
     font-size: var(--font-size-small);
diff --git a/src/renderer/components/cluster-manager/cluster-manager.scss b/src/renderer/components/cluster-manager/cluster-manager.scss
index accc72ef40..f05d6b109d 100644
--- a/src/renderer/components/cluster-manager/cluster-manager.scss
+++ b/src/renderer/components/cluster-manager/cluster-manager.scss
@@ -1,4 +1,6 @@
 .ClusterManager {
+  --bottom-bar-height: 22px;
+
   display: grid;
   grid-template-areas: "menu main" "menu main" "bottom-bar bottom-bar";
   grid-template-rows: auto 1fr min-content;
diff --git a/src/renderer/components/layout/page-layout.scss b/src/renderer/components/layout/page-layout.scss
index 2844fb4a0a..87d4e9e132 100644
--- a/src/renderer/components/layout/page-layout.scss
+++ b/src/renderer/components/layout/page-layout.scss
@@ -4,6 +4,9 @@
   --min-width: 570px;
   --nav-width: 180px;
   --spacing: calc(var(--unit) * 2);
+  --wrapper-padding: calc(var(--spacing) * 2);
+  --header-height: 64px;
+  --header-height-mac: 80px;
 
   position: relative;
   width: 100%;
@@ -30,10 +33,11 @@
     right: 0;
     bottom: 24px;
     height: unset;
-    background-color: $mainBackground;
+    background-color: var(--mainBackground);
 
     // adds extra space for traffic-light top buttons (mac only)
     .is-mac & > .header {
+      height: var(--header-height-mac);
       padding-top: calc(var(--spacing) * 2);
     }
   }
@@ -42,6 +46,7 @@
     position: sticky;
     padding: var(--spacing);
     background-color: var(--layoutTabsBackground);
+    height: var(--header-height);
   }
 
   > .content-scrollable-area {
@@ -54,13 +59,19 @@
       width: var(--width);
       min-width: var(--min-width);
       max-width: var(--max-width);
-      padding: calc(var(--spacing) * 2);
+      padding: var(--wrapper-padding);
       margin: 0 auto;
 
       .content-navigation {
         > ul {
           position: fixed;
           width: var(--nav-width);
+          height: calc(100vh - var(--header-height) - var(--wrapper-padding) - var(--bottom-bar-height));
+          overflow-y: auto;
+        }
+
+        .is-mac & > ul {
+          height: calc(100vh - var(--header-height-mac) - var(--wrapper-padding) - var(--bottom-bar-height));
         }
       }
     }