accounts: position filter dropdown better for mobile

ts/admin.ts

@@ -7,7 +7,7 @@ import { accountsList } from "./modules/accounts.js";
 import { settingsList } from "./modules/settings.js";
 import { activityList } from "./modules/activity.js";
 import { ProfileEditor } from "./modules/profiles.js";
-import { _get, _post, notificationBox, whichAnimationEvent } from "./modules/common.js";
+import { _get, _post, notificationBox, whichAnimationEvent, bindManualDropdowns } from "./modules/common.js";
 import { Updater } from "./modules/update.js";
 import { Login } from "./modules/login.js";
 
@@ -216,6 +216,8 @@ login.onLogin = () => {
     }
 }
 
+bindManualDropdowns();
+
 login.bindLogout(document.getElementById("logout-button"));
 
 login.login("", "");

ts/modules/accounts.ts

@@ -188,7 +188,7 @@ class user implements User, SearchableItem {
         if (!telegram && !discord && !matrix && !email) return;
         let innerHTML = `
         <i class="icon ri-settings-2-line ml-2 dropdown-button"></i>
-        <div class="dropdown over-top manual">
+        <div class="dropdown manual">
             <div class="dropdown-display lg">
                 <div class="card ~neutral @low">
                     <div class="supra sm mb-2">${window.lang.strings("contactThrough")}</div>

ts/modules/common.ts

@@ -263,3 +263,31 @@ export function insertText(textarea: HTMLTextAreaElement, text: string) {
         textarea.focus();
     }
 }
+
+export function bindManualDropdowns() {
+    const buttons = Array.from(document.getElementsByClassName("dropdown-manual-toggle") as HTMLCollectionOf<HTMLSpanElement>);
+    for (let button of buttons) {
+        const parent = button.closest(".dropdown.manual");
+        const display = parent.querySelector(".dropdown-display");
+        const mousein = () => parent.classList.add("selected");
+        const mouseout = () => parent.classList.remove("selected");
+        button.addEventListener("mouseover", mousein);
+        button.addEventListener("mouseout", mouseout);
+        display.addEventListener("mouseover",  mousein);
+        display.addEventListener("mouseout", mouseout);
+        button.onclick = () => {
+            parent.classList.add("selected");
+            document.addEventListener("click", outerClickListener);
+            button.removeEventListener("mouseout", mouseout);
+            display.removeEventListener("mouseout", mouseout);
+        };
+        const outerClickListener = (event: Event) => {
+            if (!(event.target instanceof HTMLElement && (display.contains(event.target) || button.contains(event.target)))) {
+                parent.classList.remove("selected");
+                document.removeEventListener("click", outerClickListener);
+                button.addEventListener("mouseout", mouseout);
+                display.addEventListener("mouseout", mouseout);
+            }
+        };
+    }
+}