fix(settings): fix mobile scrollbar padding

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;

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);