Fixed nested tooltip closing parent on interaction

frontend/src/components/modals/EditPlaylist/components/PlaylistSongItem.vue

@@ -45,6 +45,7 @@
 		</div>
 		<div class="universal-item-actions">
 			<tippy
+				v-if="loggedIn"
 				interactive="true"
 				placement="left"
 				theme="songActions"
@@ -67,7 +68,6 @@
 					<div class="youtube-icon"></div>
 				</a>
 				<i
-					v-if="loggedIn"
 					class="material-icons report-icon"
 					@click="reportSongInPlaylist(song)"
 					content="Report Song"
@@ -75,7 +75,7 @@
 				>
 					flag
 				</i>
-				<add-to-playlist-dropdown v-if="loggedIn" :song="song">
+				<add-to-playlist-dropdown :song="song">
 					<i
 						slot="button"
 						class="material-icons add-to-playlist-icon"
@@ -96,6 +96,15 @@
 				<slot name="remove" />
 				<slot name="actions" />
 			</tippy>
+			<a
+				v-else
+				target="_blank"
+				:href="`https://www.youtube.com/watch?v=${song.songId}`"
+				content="View on Youtube"
+				v-tippy
+			>
+				<div class="youtube-icon"></div>
+			</a>
 		</div>
 	</div>
 </template>

frontend/src/components/ui/AddToPlaylistDropdown.vue

@@ -5,6 +5,7 @@
 		:placement="placement"
 		theme="addToPlaylist"
 		trigger="click"
+		append-to="parent"
 	>
 		<template #trigger>
 			<slot name="button" />

frontend/src/pages/Station/components/Sidebar/Queue/QueueItem.vue

@@ -78,6 +78,7 @@
 			</p>
 			<div class="universal-item-actions">
 				<tippy
+					v-if="$parent.loggedIn"
 					interactive="true"
 					placement="left"
 					theme="songActions"
@@ -100,7 +101,6 @@
 						<div class="youtube-icon"></div>
 					</a>
 					<i
-						v-if="$parent.loggedIn"
 						class="material-icons report-icon"
 						@click="report(song)"
 						content="Report Song"
@@ -108,10 +108,7 @@
 					>
 						flag
 					</i>
-					<add-to-playlist-dropdown
-						v-if="$parent.loggedIn"
-						:song="song"
-					>
+					<add-to-playlist-dropdown :song="song">
 						<i
 							slot="button"
 							class="material-icons add-to-playlist-icon"
@@ -139,6 +136,15 @@
 					>
 					<slot name="actions" />
 				</tippy>
+				<a
+					v-else
+					target="_blank"
+					:href="`https://www.youtube.com/watch?v=${song.songId}`"
+					content="View on Youtube"
+					v-tippy
+				>
+					<div class="youtube-icon"></div>
+				</a>
 			</div>
 		</div>
 	</div>