fix(sidebars): fixed sidebar margins

src/components/navigation/SidebarBase.tsx

@@ -27,14 +27,14 @@ export const GenericSidebarBase = styled.div<{
     /*border-end-start-radius: 8px;*/
     background: var(--secondary-background);
 
-    > :nth-child(1) {
+    /*> :nth-child(1) {
         //border-end-start-radius: 8px;
-        margin-top: 48px;
     }
 
     > :nth-child(2) {
+        margin-top: 48px;
         background: red;
-    }
+    }*/
 
     ${(props) =>
         props.mobilePadding &&

src/components/navigation/right/MemberSidebar.tsx

@@ -6,9 +6,12 @@ import { Presence } from "revolt-api/types/Users";
 import { Channel } from "revolt.js/dist/maps/Channels";
 import { Server } from "revolt.js/dist/maps/Servers";
 import { User } from "revolt.js/dist/maps/Users";
+import styled, { css } from "styled-components";
 
 import { useContext, useEffect, useMemo } from "preact/hooks";
 
+import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
+
 import {
     ClientStatus,
     StatusContext,
@@ -18,6 +21,15 @@ import {
 import { GenericSidebarBase } from "../SidebarBase";
 import MemberList, { MemberListGroup } from "./MemberList";
 
+export const Container = styled.div`
+    margin-top: 48px;
+
+    ${isTouchscreenDevice &&
+    css`
+        margin-top: 0;
+    `}
+`;
+
 export default function MemberSidebar() {
     const channel = useClient().channels.get(
         useParams<{ channel: string }>().channel,
@@ -180,6 +192,9 @@ export const ServerMemberSidebar = observer(
 
         return (
             <GenericSidebarBase>
+                <Container className="test">
+                    {isTouchscreenDevice && <div>Server settings go here</div>}
+                </Container>
                 <MemberList entries={entries} context={channel} />
             </GenericSidebarBase>
         );