fix(friends): fixed friends tab

* you can deny requests on mobile now
* fixed menu to work with glass header

src/pages/friends/Friend.module.scss

@@ -10,17 +10,11 @@
     gap: 20px;
 }
 
-/*::-webkit-scrollbar-thumb {
-    width: 4px;
-    background-clip: content-box;
-    border-top: 48px solid transparent;
-}*/
-
 .list {
     padding: 0 10px 10px 10px;
     padding-top: 48px;
     user-select: none;
-    overflow-y: scroll;
+    /*overflow-y: scroll;*/
 
     &[data-empty="true"] {
         img {
@@ -194,10 +188,10 @@
 
 @media only screen and (max-width: 768px) {
     .list {
-        padding: 0 8px 8px 8px;
+        padding: 56px 8px 8px 8px;
-    }
 
         .remove {
             display: none;
         }
+    }
 }

src/pages/friends/Friends.tsx

@@ -3,6 +3,7 @@ import { UserDetail, MessageAdd, UserPlus } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { RelationshipStatus, Presence } from "revolt-api/types/Users";
 import { User } from "revolt.js/dist/maps/Users";
+import styled, { css } from "styled-components";
 
 import styles from "./Friend.module.scss";
 import { Text } from "preact-i18n";
@@ -22,6 +23,26 @@ import IconButton from "../../components/ui/IconButton";
 import { Children } from "../../types/Preact";
 import { Friend } from "./Friend";
 
+const Container = styled.div`
+    overflow-y: scroll;
+
+    ::-webkit-scrollbar-thumb {
+        min-height: 100px;
+        width: 4px;
+        background-clip: content-box;
+        border-top: 48px solid transparent;
+    }
+    ${() =>
+        isTouchscreenDevice &&
+        css`
+            ::-webkit-scrollbar-thumb {
+                min-height: 150px;
+                border-top: 56px solid transparent;
+                border-bottom: var(--bottom-navigation-height) solid transparent;
+            }
+        `}
+`;
+
 export default observer(() => {
     const { openScreen } = useIntermediate();
 
@@ -115,6 +136,7 @@ export default observer(() => {
                     */}
                 </div>
             </PageHeader>
+            <Container>
                 <div
                     className={styles.list}
                     data-empty={isEmpty}
@@ -144,7 +166,10 @@ export default observer(() => {
                                                 size={64}
                                                 mask={
                                                     i <
-                                                Math.min(incoming.length - 1, 2)
+                                                    Math.min(
+                                                        incoming.length - 1,
+                                                        2,
+                                                    )
                                                         ? "url(#overlap)"
                                                         : undefined
                                                 }
@@ -209,6 +234,7 @@ export default observer(() => {
                         );
                     })}
                 </div>
+            </Container>
         </>
     );
 });