fix(lyrics): cursors for lyrics are inconsistent

aminnausin · aminnausin · commit 3926c06c472c · 2025-11-30T14:51:24.000-05:00
diff --git a/resources/js/components/video/VideoLyricItem.vue b/resources/js/components/video/VideoLyricItem.vue
@@ -16,14 +16,13 @@ withDefaults(
 
 <template>
     <div
-        :class="[
-            'transition-all ease-in w-full hover:bg-neutral-800/30 ',
-            lyric.time !== undefined ? 'cursor-pointer' : 'cursor-default',
-            isActive ? 'bg-neutral-800/40 text-yellow-400 opacity-100 duration-300' : 'opacity-85',
-        ]"
+        :class="['w-full transition-all ease-in hover:bg-neutral-800/30', isActive ? 'bg-neutral-800/40 text-yellow-400 opacity-100 duration-300' : 'opacity-85']"
         :id="`lyric-${lyric?.time ?? index}`"
     >
-        <button class="px-4 sm:px-0 py-1 sm:mx-auto sm:w-4/5 break-normal pointer-events-auto" @click="$emit('clicked')">
+        <button
+            :class="['pointer-events-auto px-4 py-1 break-normal sm:mx-auto sm:w-4/5 sm:px-0', lyric.time !== undefined ? 'cursor-pointer' : 'cursor-default']"
+            @click="$emit('clicked')"
+        >
             {{ lyric?.text || '-' }}
         </button>
     </div>
diff --git a/resources/js/components/video/VideoLyrics.vue b/resources/js/components/video/VideoLyrics.vue
@@ -253,7 +253,7 @@ defineExpose({ scrollToCurrent });
             :lyric="{ text: `${isLoadingLyrics ? 'Generating' : 'Generate with Magic'}...` }"
             :is-active="false"
             :index="0"
-            :class="{ 'opacity-60!': isLoadingLyrics }"
+            :class="[{ 'opacity-60!': isLoadingLyrics }, '*:cursor-pointer!']"
             @clicked="handleGenerateLyrics"
         />
         <div class="shrink-0" style="height: 45%"></div>
