From d6ecb1217ff94854739d64edf691bff3d0a7eb7d Mon Sep 17 00:00:00 2001
From: "banaanihillo@protonmail.ch" <banaanihillo@protonmail.ch>
Date: Sun, 21 Apr 2024 06:41:24 +0000
Subject: [PATCH] "Context menu" generic span element modified into button
 (#163)

Co-authored-by: valtteri.murtonen@puheet.com <valtteri.murtonen@puheet.com>
Reviewed-on: https://codeberg.org/Hyperpipe/Hyperpipe/pulls/163
Co-authored-by: banaanihillo@protonmail.ch <banaanihillo@protonmail.ch>
Co-committed-by: banaanihillo@protonmail.ch <banaanihillo@protonmail.ch>
---
 src/components/SongItem.vue | 30 +++++++++++++++++-------------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/components/SongItem.vue b/src/components/SongItem.vue
index 5104888..4893285 100644
--- a/src/components/SongItem.vue
+++ b/src/components/SongItem.vue
@@ -132,30 +132,31 @@ const openSong = el => {
       </a>
     </span>
 
-    <span
+    <button
       class="bi bi-three-dots-vertical popup-wrap ign"
       @mouseenter="show = true"
-      @mouseleave="show = false">
+      @mouseleave="show = false"
+      @click.enter="show = !show">
       <Transition name="fade">
         <div v-if="show" class="popup ign">
-          <span
+          <button
             v-if="playlistId || offlineUri"
             class="bi bi-dash-lg clickable ign"
-            @click="Remove"></span>
-          <span
+            @click="Remove"></button>
+          <button
             class="bi bi-chevron-bar-right clickable ign"
-            @click="appendSong"></span>
-          <span
+            @click="appendSong"></button>
+          <button
             class="bi bi-collection clickable ign"
-            @click="showPl = true"></span>
-          <span
+            @click="showPl = true"></button>
+          <button
             class="bi bi-broadcast clickable ign"
-            @click="$emit('nxt-song')"></span>
-          <span class="bi bi-plus-lg clickable ign" @click="addSong"></span>
-          <span class="bi bi-share clickable ign" @click="Share"></span>
+            @click="$emit('nxt-song')"></button>
+          <button class="bi bi-plus-lg clickable ign" @click="addSong"></button>
+          <button class="bi bi-share clickable ign" @click="Share"></button>
         </div>
       </Transition>
-    </span>
+    </button>
   </div>
 </template>
 
@@ -177,6 +178,9 @@ span.content {
 span.bi-three-dots-vertical {
   margin: 2rem;
 }
+button.bi-three-dots-vertical {
+  border: none;
+}
 .popup {
   line-height: auto;
   height: auto;