admin: scroll current tab in nav to center

for #456, ensures you can see and press both the next and previous tabs
    even if you can't scroll for some reason.

html/admin.html

@@ -561,7 +561,7 @@
                 <label>
                     <input type="submit" class="unfocused">
                     <span class="button ~urge @low full-width center supra submit">{{ .strings.submit }}</span>
-                </label>
+                </label>"
             </form>
         </div>
         <div id="notification-box"></div>
@@ -581,11 +581,11 @@
                 </div>
             </div>
             <header>
-                <div class="flex flex-row overflow-x-auto items-center gap-2">
+                <div class="flex flex-row overflow-x-auto items-center gap-2 scroll-smooth">
-                    <span id="button-tab-invites"  class="text-3xl button portal ~neutral dark:~d_neutral @low px-5">{{ .strings.invites }}</span>
+                    <button type="button" id="button-tab-invites"  class="text-3xl button portal ~neutral dark:~d_neutral @low px-5">{{ .strings.invites }}</button>
-                    <span id="button-tab-accounts" class="text-3xl button portal ~neutral dark:~d_neutral @low px-5">{{ .strings.accounts }}</span>
+                    <button type="button" id="button-tab-accounts" class="text-3xl button portal ~neutral dark:~d_neutral @low px-5">{{ .strings.accounts }}</button>
-                    <span id="button-tab-activity" class="text-3xl button portal ~neutral dark:~d_neutral @low px-5">{{ .strings.activity }}</span>
+                    <button type="button" id="button-tab-activity" class="text-3xl button portal ~neutral dark:~d_neutral @low px-5">{{ .strings.activity }}</button>
-                    <span id="button-tab-settings" class="text-3xl button portal ~neutral dark:~d_neutral @low px-5">{{ .strings.settings }}</span>
+                    <button type="button" id="button-tab-settings" class="text-3xl button portal ~neutral dark:~d_neutral @low px-5">{{ .strings.settings }}</button>
                 </div>
             </header>
             <div id="tab-invites" class="flex flex-col gap-4">

ts/admin.ts

@@ -101,6 +101,34 @@ window.availableProfiles = window.availableProfiles || [];
     }
 })();
 
+// Make the navbar horizontally scrollable by dragging (with mouse)
+// doesn't work incredibly well so disabled.
+/*[...document.getElementsByClassName("horizontally-scrollable")].forEach((c: HTMLElement) => {
+    c.classList.add("cursor-pointer");
+    let down = false;
+    let startX: number, scrollLeft: number;
+    c.addEventListener("mousedown", (ev: MouseEvent) => {
+        console.log("down");
+        down = true;
+        c.classList.add("active");
+        startX = ev.pageX - c.offsetLeft;
+        scrollLeft = c.scrollLeft;
+    });
+    const leave = () => {
+        console.log("up");
+        down = false;
+        c.classList.remove("active");
+    };
+    c.addEventListener("mouseleave", leave);
+    c.addEventListener("mouseup", leave);
+    c.addEventListener("mousemove", (ev: MouseEvent) => {
+        if (!down) return;
+        const x = ev.pageX - c.offsetLeft;
+        const walk = x - startX;
+        c.scrollLeft = scrollLeft - walk;
+    });
+});*/
+
 var inviteCreator = new createInvite();
 
 var accounts = new accountsList();

ts/modules/tabs.ts

@@ -33,13 +33,20 @@ export class Tabs implements Tabs {
         let tab: Tab = {
             page: null,
             tabEl: document.getElementById("tab-" + tabID) as HTMLDivElement,
-            buttonEl: document.getElementById("button-tab-" + tabID) as HTMLSpanElement,
+            buttonEl: document.getElementById("button-tab-" + tabID) as HTMLButtonElement,
             preFunc: preFunc,
             postFunc: postFunc,
         };
         if (this._baseOffset == -1) {
             this._baseOffset = tab.buttonEl.offsetLeft;
         }
+        const order = Array.from(this.tabs.keys());
+        let scrollTo: () => number = (): number => tab.buttonEl.offsetLeft - this._baseOffset;
+        if (order.length > 0) {
+            scrollTo = (): number =>
+                tab.buttonEl.offsetLeft - (tab.buttonEl.parentElement.offsetWidth - tab.buttonEl.offsetWidth) / 2;
+        }
+
         tab.page = {
             name: tabID,
             title: document.title /*FIXME: Get actual names from translations*/,
@@ -47,7 +54,11 @@ export class Tabs implements Tabs {
             show: () => {
                 tab.buttonEl.classList.add("active", "~urge");
                 tab.tabEl.classList.remove("unfocused");
-                tab.buttonEl.parentElement.scrollTo(tab.buttonEl.offsetLeft - this._baseOffset, 0);
+                tab.buttonEl.parentElement.scrollTo({
+                    left: scrollTo(),
+                    top: 0,
+                    behavior: "auto",
+                });
                 document.dispatchEvent(new CustomEvent("tab-change", { detail: tabID }));
                 return true;
             },