From 50dfd4fa63a92d22f627a9b3a71dff2f4357e827 Mon Sep 17 00:00:00 2001
From: Jari Kolehmainen <jari.kolehmainen@gmail.com>
Date: Mon, 1 Jun 2020 15:42:34 +0300
Subject: [PATCH] Unify scrollbars/paddings across supported OS (#367)

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>
---
 src/renderer/assets/css/app.scss                   | 13 +++++++++++++
 src/renderer/components/MainMenu/MainMenu.vue      | 11 +++++++++--
 src/renderer/components/PreferencesPage.vue        |  1 -
 src/renderer/components/common/ClosePageButton.vue |  2 +-
 4 files changed, 23 insertions(+), 4 deletions(-)

diff --git a/src/renderer/assets/css/app.scss b/src/renderer/assets/css/app.scss
index 545ca94d73..ed40661368 100644
--- a/src/renderer/assets/css/app.scss
+++ b/src/renderer/assets/css/app.scss
@@ -65,6 +65,19 @@ pre {
   width: 100%;
 }
 
+::-webkit-scrollbar {
+  width: 12px;
+
+}
+
+::-webkit-scrollbar-track {
+  box-shadow: inset 0 0 12px $lens-pane-bg;
+}
+
+::-webkit-scrollbar-thumb {
+  box-shadow: inset 0 0 12px $lens-pane-bg;
+}
+
 h1, h2, h3, h4, h5, h6{
   color: #fff;
   font-size: 20.8px;
diff --git a/src/renderer/components/MainMenu/MainMenu.vue b/src/renderer/components/MainMenu/MainMenu.vue
index 9dbd092f39..79124a6021 100644
--- a/src/renderer/components/MainMenu/MainMenu.vue
+++ b/src/renderer/components/MainMenu/MainMenu.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="main-menu">
+  <div :style="{ paddingTop: computedPaddingTop }" class="main-menu">
     <draggable v-model="clusters">
       <ClusterMenuItem
         v-for="cluster in clusters" :key="cluster.id"
@@ -23,6 +23,7 @@ import ClusterMenuItem from "@/components/MainMenu/ClusterMenuItem";
 import AddClusterMenuItem from "@/components/MainMenu/AddClusterMenuItem";
 import draggable from 'vuedraggable'
 import { clusterStore } from "@/../common/cluster-store";
+import * as os from "os";
 
 const { remote } = require('electron')
 const { Menu, MenuItem } = remote
@@ -36,6 +37,7 @@ export default {
   },
   data(){
     return {
+      computedPaddingTop: "15px"
     }
   },
   computed : {
@@ -64,6 +66,11 @@ export default {
         },
       }).catch(err => {})
     }
+  },
+  mounted: function() {
+    if (os.platform() == "darwin") {
+      this.computedPaddingTop = "25px";
+    }
   }
 }
 </script>
@@ -75,7 +82,7 @@ export default {
   top: 0;
   bottom: 20px;
   width: 70px;
-  padding-top: 25px;
+  padding-top: 15px;
   background: #252729;
   overflow: hidden;
   z-index: 1000;
diff --git a/src/renderer/components/PreferencesPage.vue b/src/renderer/components/PreferencesPage.vue
index 676f8b10ce..88913a830d 100644
--- a/src/renderer/components/PreferencesPage.vue
+++ b/src/renderer/components/PreferencesPage.vue
@@ -227,7 +227,6 @@ export default {
 <style lang="scss" scoped>
 #app > .main-view > .content {
   left: 70px;
-  right: 70px;
 }
 .lens-preferences {
   height: 100%;
diff --git a/src/renderer/components/common/ClosePageButton.vue b/src/renderer/components/common/ClosePageButton.vue
index 6314eb568f..5776d9e63d 100644
--- a/src/renderer/components/common/ClosePageButton.vue
+++ b/src/renderer/components/common/ClosePageButton.vue
@@ -25,7 +25,7 @@ export default {
 div.close-page-button {
   position: absolute;
   top: 20px;
-  right: 10px;
+  right: 25px;
   z-index: 1100;
   a {
     position: relative;