From fdbd931ea70d520926efc8d8cf0c157b57dfcb56 Mon Sep 17 00:00:00 2001
From: trashtemp <96388163+trashtemp@users.noreply.github.com>
Date: Thu, 30 Dec 2021 14:37:56 +0100
Subject: [PATCH] fix(app): fixed broken scrollbar on mobile

---
 src/components/navigation/SidebarBase.tsx    | 6 ------
 src/pages/RevoltApp.tsx                      | 8 +++++++-
 src/pages/channels/messaging/MessageArea.tsx | 6 ------
 3 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/src/components/navigation/SidebarBase.tsx b/src/components/navigation/SidebarBase.tsx
index 214b848e..b16f1a6c 100644
--- a/src/components/navigation/SidebarBase.tsx
+++ b/src/components/navigation/SidebarBase.tsx
@@ -15,12 +15,6 @@ export default styled.div`
         max(var(--min-opacity), 0.75)
     );
     backdrop-filter: blur(20px);
-
-    /*> * > ::-webkit-scrollbar-thumb {
-        width: 4px;
-        background-clip: content-box;
-        border-top: 48px solid transparent;
-    }*/
 `;
 
 export const GenericSidebarBase = styled.div<{
diff --git a/src/pages/RevoltApp.tsx b/src/pages/RevoltApp.tsx
index a6d748d2..c46c7fe5 100644
--- a/src/pages/RevoltApp.tsx
+++ b/src/pages/RevoltApp.tsx
@@ -1,6 +1,6 @@
 import { Docked, OverlappingPanels, ShowIf } from "react-overlapping-panels";
 import { Switch, Route, useLocation } from "react-router-dom";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 
 import ContextMenus from "../lib/ContextMenus";
 import { isTouchscreenDevice } from "../lib/isTouchscreenDevice";
@@ -56,6 +56,12 @@ const Routes = styled.div`
         max(var(--min-opacity), 0.75)
     );*/
     //backdrop-filter: blur(10px);
+
+    ${() =>
+        isTouchscreenDevice &&
+        css`
+            overflow: hidden;
+        `}
 `;
 
 export default function App() {
diff --git a/src/pages/channels/messaging/MessageArea.tsx b/src/pages/channels/messaging/MessageArea.tsx
index 7dafdd6f..16836f60 100644
--- a/src/pages/channels/messaging/MessageArea.tsx
+++ b/src/pages/channels/messaging/MessageArea.tsx
@@ -42,12 +42,6 @@ const Area = styled.div`
     padding-top: 48px;
     word-break: break-word;
 
-    > * > ::-webkit-scrollbar-thumb {
-        width: 4px;
-        background-clip: content-box;
-        border-top: 80px solid transparent;
-    }
-
     > div {
         display: flex;
         min-height: 100%;