From 1534a28b76a61a1d0ec488578d890b8af2a598c9 Mon Sep 17 00:00:00 2001
From: Marcel Schramm <marceloschr@googlemail.com>
Date: Sun, 20 Oct 2024 11:44:35 +0200
Subject: [PATCH] Fixes #341

---
 internal/frontend/templates/lobby.html | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/internal/frontend/templates/lobby.html b/internal/frontend/templates/lobby.html
index ec72e752..2d4dc7d0 100644
--- a/internal/frontend/templates/lobby.html
+++ b/internal/frontend/templates/lobby.html
@@ -28,7 +28,7 @@
                 <div id="lobby-header-center-element">
                     <div>
                         <div>
-                            <button popovertarget="menu" alt="Show menu" title="Show menu">
+                            <button id="menu-button" popovertarget="menu" alt="Show menu" title="Show menu">
                                 <img src="{{.RootPath}}/resources/menu.svg?cache_bust={{.CacheBust}}"
                                     class="header-button-image" />
                             </button>
@@ -569,8 +569,24 @@
             showDialog(id, title, messageNode);
         }
 
+        const menu = document.getElementById("menu");
         function hideMenu() {
-            document.getElementById("menu").hidePopover();
+            menu.hidePopover();
+        }
+
+        // Since chromes implementation of the popup is dumb, we can't position
+        // it correctly without javascript.
+        if (!navigator.userAgent.toLowerCase().includes('firefox')) {
+            const menu_button = document.getElementById("menu-button");
+            menu.addEventListener("toggle", (event) => {
+                if (event.newState === "open") {
+                    const bounds = menu_button.getBoundingClientRect();
+                    // Technically this won't correctly handle the scrolling
+                    // position, but we'll cope for now.
+                    menu.style.top = bounds.bottom + "px"
+                    menu.style.left = bounds.left + "px"
+                }
+            });
         }
 
         function showDialog(id, title, contentNode, buttonBar) {