From 62b7ba2e4d9b908e038ecea1985029719ef4d365 Mon Sep 17 00:00:00 2001
From: trashtemp <96388163+trashtemp@users.noreply.github.com>
Date: Tue, 4 Jan 2022 19:49:37 +0100
Subject: [PATCH] fix(settings): fixed mobile settings padding

---
 src/pages/settings/GenericSettings.tsx  |  6 +++++-
 src/pages/settings/Settings.module.scss | 17 +++++++++++++----
 2 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/pages/settings/GenericSettings.tsx b/src/pages/settings/GenericSettings.tsx
index 12a4665c..90e7ac9a 100644
--- a/src/pages/settings/GenericSettings.tsx
+++ b/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) =>
diff --git a/src/pages/settings/Settings.module.scss b/src/pages/settings/Settings.module.scss
index f18c0ee8..a38cb38f 100644
--- a/src/pages/settings/Settings.module.scss
+++ b/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
-                calc(var(--bottom-navigation-height) + 30px);
+            padding: 20px 10px 80px;
             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;
         }
     }
 }