From 30adbf7c0b1349bafe6589a3740a885ab20cabc7 Mon Sep 17 00:00:00 2001
From: tobifroe <froelichtobias@gmail.com>
Date: Mon, 20 Mar 2023 22:07:56 +0100
Subject: [PATCH] fix(2054): only calculate dropdown position when opening

---
 front/src/components/audio/PlayButton.vue | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/front/src/components/audio/PlayButton.vue b/front/src/components/audio/PlayButton.vue
index 860639184..40dabe64c 100644
--- a/front/src/components/audio/PlayButton.vue
+++ b/front/src/components/audio/PlayButton.vue
@@ -105,15 +105,17 @@ const openMenu = () => {
   // little magic to ensure the menu is always visible in the viewport
   // By default, try to display it on the right if there is enough room
   const menu = dropdown.value.find('.menu')
-  const viewportOffset = menu.get(0)?.getBoundingClientRect() ?? { right: 0, left: 0 }
-  const viewportWidth = document.documentElement.clientWidth
-  const rightOverflow = viewportOffset.right - viewportWidth
-  const leftOverflow = -viewportOffset.left
+  if (!menu.classList.includes('visible')) {
+    const viewportOffset = menu.get(0)?.getBoundingClientRect() ?? { right: 0, left: 0 }
+    const viewportWidth = document.documentElement.clientWidth
+    const rightOverflow = viewportOffset.right - viewportWidth
+    const leftOverflow = -viewportOffset.left
 
-  if (rightOverflow > 0) {
-    menu.css({ cssText: `left: ${-rightOverflow - 5}px !important;` })
-  } else if (leftOverflow > 0) {
-    menu.css({ cssText: `right: -${leftOverflow + 5}px !important;` })
+    if (rightOverflow > 0) {
+      menu.css({ cssText: `left: ${-rightOverflow - 5}px !important;` })
+    } else if (leftOverflow > 0) {
+      menu.css({ cssText: `right: -${leftOverflow + 5}px !important;` })
+    }
   }
 }
 </script>