From 2edf122b3482dae6a4f88895cbf425b9ccd0e55c Mon Sep 17 00:00:00 2001
From: Paul Makles <paulmakles@gmail.com>
Date: Tue, 4 Jan 2022 23:11:58 +0000
Subject: [PATCH] fix(settings): fix mobile scrollbar padding

---
 src/pages/settings/Settings.module.scss | 23 ++++++-----------------
 src/styles/_elements.scss               |  2 +-
 2 files changed, 7 insertions(+), 18 deletions(-)

diff --git a/src/pages/settings/Settings.module.scss b/src/pages/settings/Settings.module.scss
index a38cb38f..59d53192 100644
--- a/src/pages/settings/Settings.module.scss
+++ b/src/pages/settings/Settings.module.scss
@@ -38,14 +38,6 @@
     flex-direction: column;
     background: var(--primary-header);
 
-    ::-webkit-scrollbar-thumb {
-        min-height: 100px;
-        width: 4px;
-        background-clip: content-box;
-        border-top: var(--header-height) solid transparent;
-        border-bottom: var(--bottom-navigation-height) solid transparent;
-    }
-
     .sidebar,
     .content {
         background: var(--primary-background);
@@ -56,7 +48,7 @@
         overflow-y: auto;
 
         .container {
-            padding: 20px 10px 80px;
+            padding: 12px 10px 80px;
             min-width: 218px;
         }
 
@@ -97,6 +89,11 @@
     &.closing {
         animation: close 0.18s ease-in;
     }
+
+    .scrollbox::-webkit-scrollbar-thumb {
+        background-clip: content-box;
+        border-top: 80px solid transparent;
+    }
 }
 
 .settings {
@@ -119,14 +116,6 @@
         visibility: visible;
     }
 
-    // All children receive custom scrollbar.
-    > * > ::-webkit-scrollbar-thumb {
-        min-height: 100px;
-        width: 4px;
-        background-clip: content-box;
-        border-top: 80px solid transparent;
-    }
-
     .sidebar {
         flex: 1 0 218px;
         display: flex;
diff --git a/src/styles/_elements.scss b/src/styles/_elements.scss
index 35d28c9b..a03ce82f 100644
--- a/src/styles/_elements.scss
+++ b/src/styles/_elements.scss
@@ -13,8 +13,8 @@
 }
 
 ::-webkit-scrollbar-thumb {
-    min-height: 30px;
     min-width: 30px;
+    min-height: 30px;
 
     background-clip: content-box;
     background: var(--scrollbar-thumb);