From a4e268e5434ae52cf8f4504161fabf182a52cdfc Mon Sep 17 00:00:00 2001
From: Stefan Dej <meteyou@gmail.com>
Date: Mon, 18 Jul 2022 00:49:00 +0200
Subject: [PATCH] fix: remove js scrollbars in body & editor (#962)

---
 src/App.vue                  | 12 +++---------
 src/assets/styles/page.scss  | 21 ++++++++++++++++++++-
 src/components/TheEditor.vue | 16 ++++++----------
 3 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 9328eb0e..4aa8e4cf 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -21,10 +21,6 @@
     /*noinspection CssUnresolvedCustomProperty*/
     color: var(--v-btn-text-primary);
 }
-
-.main-content-scrollbar {
-    height: calc(var(--app-height) - 48px);
-}
 </style>
 
 <template>
@@ -34,11 +30,9 @@
             <the-topbar></the-topbar>
 
             <v-main id="content" :style="mainStyle">
-                <overlay-scrollbars class="main-content-scrollbar">
-                    <v-container id="page-container" fluid class="container px-3 px-sm-6 py-sm-6 mx-auto">
-                        <router-view></router-view>
-                    </v-container>
-                </overlay-scrollbars>
+                <v-container id="page-container" fluid class="container px-3 px-sm-6 py-sm-6 mx-auto">
+                    <router-view></router-view>
+                </v-container>
             </v-main>
             <the-update-dialog></the-update-dialog>
             <the-editor></the-editor>
diff --git a/src/assets/styles/page.scss b/src/assets/styles/page.scss
index e4c9bba3..979b5d51 100644
--- a/src/assets/styles/page.scss
+++ b/src/assets/styles/page.scss
@@ -1,5 +1,6 @@
 html {
-    overflow: hidden;
+    overflow: auto;
+    scrollbar-color: #6b6b6b #272727;
 }
 
 body {
@@ -58,3 +59,21 @@ body {
 .settings-tabs .v-window {
     overflow-y: auto !important;
 }
+
+.editor-dialog .cm-editor {
+    height: calc(100vh - 48px);
+}
+
+::-webkit-scrollbar {
+    background-color: #272727;
+    width: 14px;
+    height: 14px;
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: #6b6b6b;
+    border-radius: 7px;
+    border: 4px solid #272727;
+    min-width: 100px;
+    min-height: 100px;
+}
diff --git a/src/components/TheEditor.vue b/src/components/TheEditor.vue
index f35e5ac7..2a240c5b 100644
--- a/src/components/TheEditor.vue
+++ b/src/components/TheEditor.vue
@@ -1,5 +1,3 @@
-<style scoped></style>
-
 <template>
     <div>
         <v-dialog
@@ -49,14 +47,12 @@
                     </v-btn>
                 </template>
                 <v-card-text class="pa-0">
-                    <overlay-scrollbars style="height: calc(var(--app-height) - 48px)" :options="scrollbarOptions">
-                        <codemirror-async
-                            v-if="show"
-                            ref="editor"
-                            v-model="sourcecode"
-                            :name="filename"
-                            :file-extension="fileExtension"></codemirror-async>
-                    </overlay-scrollbars>
+                    <codemirror-async
+                        v-if="show"
+                        ref="editor"
+                        v-model="sourcecode"
+                        :name="filename"
+                        :file-extension="fileExtension"></codemirror-async>
                 </v-card-text>
             </panel>
         </v-dialog>