fix(server selector): better handling for large server/folder list

src/renderer/features/sidebar/components/server-selector.module.css

@@ -34,7 +34,7 @@
 }
 
 .scroll-area {
-    max-height: 400px;
+    max-height: calc(100vh - 50px);
 }
 
 .server-logo {

src/renderer/features/sidebar/components/server-selector.tsx

@@ -69,7 +69,7 @@ export const ServerSelector = () => {
               : OpenSubsonicLogo;
 
     return (
-        <DropdownMenu offset={0} position="top">
+        <DropdownMenu offset={0} position="right">
             <DropdownMenu.Target>
                 <div className={styles.popoverTarget}>
                     <Box
@@ -93,7 +93,7 @@ export const ServerSelector = () => {
                 </div>
             </DropdownMenu.Target>
             <DropdownMenu.Dropdown style={{ width: `${widthOfTarget}px` }}>
-                <ScrollArea style={{ maxHeight: 'calc(100vh - 200px)' }}>
+                <ScrollArea className={styles.scrollArea}>
                     <ServerSelectorItems />
                 </ScrollArea>
             </DropdownMenu.Dropdown>