From 8d4f7a38fd9b9a6829e66831b3d45c658673ec26 Mon Sep 17 00:00:00 2001
From: AsyncFox <dev.asyncfox@gmail.com>
Date: Mon, 8 Jan 2024 22:49:54 +0800
Subject: [PATCH] refactor: use popover instead of tooltip for song messages

---
 components/MusicCard.vue | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/components/MusicCard.vue b/components/MusicCard.vue
index 89523b2..26d4b8d 100644
--- a/components/MusicCard.vue
+++ b/components/MusicCard.vue
@@ -41,18 +41,18 @@ function isMine() {
           <UiBadge v-if="showGrade && 'submitterGrade' in song" variant="secondary" class="rounded-md ml-2 self-center h-6 min-w-[2.8rem]">
             {{ gradeMap[song?.submitterGrade] }}
           </UiBadge>
-          <UiTooltipProvider v-if="(typeof song.message) === 'string' && 'type' in song && song.type === 'withMsg'">
-            <UiTooltip>
-              <UiTooltipTrigger as-child>
-                <UiBadge class="ml-1 rounded-md">
-                  留言
-                </UiBadge>
-              </UiTooltipTrigger>
-              <UiTooltipContent>
-                <p>{{ song?.message }}</p>
-              </UiTooltipContent>
-            </UiTooltip>
-          </UiTooltipProvider>
+          <UiPopover v-if="(typeof song.message) === 'string' && 'type' in song && song.type === 'withMsg'">
+            <UiPopoverTrigger as-child>
+              <UiBadge class="ml-1 rounded-md">
+                留言
+              </UiBadge>
+            </UiPopoverTrigger>
+            <UiPopoverContent class="flex">
+              <p class="text-md break-all">
+                {{ song?.message }}
+              </p>
+            </UiPopoverContent>
+          </UiPopover>
         </UiCardTitle>
         <UiCardDescription v-if="song?.creator">
           <span class="break-all">