Small update for desktop app

src/components/navigation/left/ServerListSidebar.tsx

@@ -1,4 +1,5 @@
 import { Plus } from "@styled-icons/boxicons-regular";
+import { Compass } from "@styled-icons/boxicons-solid";
 import { observer } from "mobx-react-lite";
 import { useLocation, useParams } from "react-router-dom";
 import { RelationshipStatus } from "revolt-api/types/Users";
@@ -94,6 +95,10 @@ const ServerEntry = styled.div<{ active: boolean; home?: boolean }>`
     display: flex;
     align-items: center;
 
+    :focus {
+        outline: 3px solid blue;
+      }
+
     > div {
         height: 42px;
         padding-inline-start: 6px;
@@ -299,6 +304,15 @@ export const ServerListSidebar = observer(({ unreads, lastOpened }: Props) => {
                     }>
                     <Plus size={36} />
                 </IconButton>
+                {/*<IconButton
+                    onClick={() =>
+                        openScreen({
+                            id: "special_input",
+                            type: "create_server",
+                        })
+                    }>
+                    <Compass size={36} />
+                </IconButton>*/}
                 <PaintCounter small />
             </ServerList>
         </ServersBase>

src/pages/settings/GenericSettings.tsx

@@ -122,6 +122,7 @@ export function GenericSettings({
             )}
             {(!isTouchscreenDevice || typeof page === "undefined") && (
                 <div className={styles.sidebar}>
+                    <div className={styles.scrollbox}>
                         <div className={styles.container}>
                             {pages.map((entry, i) =>
                                 entry.hidden ? undefined : (
@@ -150,9 +151,11 @@ export function GenericSettings({
                             {custom}
                         </div>
                     </div>
+                </div>
             )}
             {(!isTouchscreenDevice || typeof page === "string") && (
                 <div className={styles.content}>
+                    {/*<div className={styles.scrollbox}>*/}
                     {!isTouchscreenDevice &&
                         !pages.find((x) => x.id === page && x.hideTitle) && (
                             <h1>
@@ -164,6 +167,7 @@ export function GenericSettings({
                             </h1>
                         )}
                     <Switch>{children}</Switch>
+                    {/*</div>*/}
                 </div>
             )}
             {!isTouchscreenDevice && (

src/pages/settings/Settings.module.scss

@@ -83,6 +83,24 @@
     justify-content: center;
     background: var(--primary-background);
 
+    .scrollbox {
+        overflow: auto;
+        visibility: hidden;
+
+        transition: visibility 0.2s;
+    }
+
+    .container,
+    .scrollbox:hover,
+    .scrollbox:focus {
+    visibility: visible;
+    }
+    
+    ::-webkit-scrollbar-thumb {
+        background-clip: content-box;
+        border-top: 80px solid transparent;
+    }
+
     .sidebar {
         flex: 1 0 218px;
         display: flex;
@@ -93,11 +111,12 @@
 
         .container {
             width: 218px;
-            padding: 60px 8px;
+            padding: 80px 8px;
             height: fit-content;
             display: flex;
             gap: 2px;
             flex-direction: column;
+            visibility: visible;
         }
 
         .divider {
@@ -139,7 +158,7 @@
     .content {
         flex: 3;
         max-width: 740px;
-        padding: 60px 2em;
+        padding: 80px 2em;
         overflow-y: scroll;
         overflow-x: hidden;
 
@@ -186,7 +205,7 @@
     .action {
         flex: 1;
         flex-shrink: 0;
-        padding: 60px 8px;
+        padding: 80px 8px;
         color: var(--tertiary-background);
 
         &:after {