fix(settings): fixed mobile settings padding

src/pages/settings/GenericSettings.tsx

@@ -132,7 +132,11 @@ export function GenericSettings({
             )}
             {(!isTouchscreenDevice || typeof page === "undefined") && (
                 <div className={styles.sidebar}>
-                    <div className={styles.scrollbox}>
+                    <div
+                        className={styles.scrollbox}
+                        data-scroll-offset={
+                            isTouchscreenDevice ? "with-padding" : undefined
+                        }>
                         <div className={styles.container}>
                             {isTouchscreenDevice && indexHeader}
                             {pages.map((entry, i) =>

src/pages/settings/Settings.module.scss

@@ -38,6 +38,14 @@
     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);
@@ -48,8 +56,7 @@
         overflow-y: auto;
 
         .container {
-            padding: calc(var(--header-height) + 4px) 8px
+            padding: 20px 10px 80px;
-                calc(var(--bottom-navigation-height) + 30px);
             min-width: 218px;
         }
 
@@ -63,7 +70,9 @@
 
     /* Content */
     .content {
-        padding: 0;
+        ::-webkit-scrollbar-thumb {
+            border-bottom: none;
+        }
 
         .scrollbox {
             overflow: auto;
@@ -71,7 +80,7 @@
 
         .contentcontainer {
             max-width: unset !important;
-            padding: 72px 12px var(--bottom-navigation-height) !important;
+            padding: 20px 10px 80px;
         }
     }
 }