fix ArtistName component width calculation in vTooltip

+ add tracklist breakpoints to virtual scroll page layout

src/components/FolderView/SongList.vue

@@ -157,25 +157,6 @@ function getTrackList() {
       background-color: $gray4;
       color: $white !important;
     }
-
-    .highlighted {
-      color: $white !important;
-      animation: blinker 1.5s ease 1s;
-    }
-
-    @keyframes blinker {
-      25% {
-        background-color: $gray4;
-      }
-
-      50% {
-        background-color: transparent;
-      }
-
-      75% {
-        background-color: $gray4;
-      }
-    }
   }
 }
 

src/components/LeftSidebar/NP/SongCard.vue

@@ -31,6 +31,7 @@
       <ArtistName
         :artists="track?.artist || []"
         :albumartist="track?.albumartist || 'Play something'"
+        :small="true"
         class="artists"
       />
     </div>
@@ -106,9 +107,8 @@ const imguri = paths.images.thumb.large;
     font-weight: 900;
     margin: 0 auto;
   }
-
+  
   .artists {
-    font-size: 0.85rem;
     opacity: 0.5;
     margin: 0 auto;
 

src/components/shared/ArtistName.vue

@@ -1,9 +1,16 @@
 <template>
-  <div v-tooltip style="width: auto">
-    <div class="ellip" v-if="artists === null || artists.length === 0">
+  <div
+    v-tooltip
+    style="width: fit-content"
+    class="ellip"
+    :style="{
+      fontSize: small ? '0.85rem' : smaller ? 'small' : '',
+    }"
+  >
+    <div v-if="artists === null || artists.length === 0">
       <span>{{ albumartist }}</span>
     </div>
-    <div class="ellip" v-else>
+    <div v-else>
       <span v-for="artist in putCommas(artists)" :key="artist">{{
         artist
       }}</span>
@@ -17,5 +24,7 @@ import { putCommas } from "@/utils";
 const props = defineProps<{
   artists: string[] | null;
   albumartist: string | undefined;
+  small?: boolean;
+  smaller?: boolean;
 }>();
 </script>

src/components/shared/TrackItem.vue

@@ -28,7 +28,11 @@
       </div>
       <hr />
       <div class="artist">
-        <ArtistName :artists="track.artist" :albumartist="track.albumartist" />
+        <ArtistName
+          :artists="track.artist"
+          :albumartist="track.albumartist"
+          :smaller="true"
+        />
       </div>
     </div>
     <div
@@ -140,7 +144,6 @@ const playThis = (track: Track) => {
   }
 
   .artist {
-    font-size: small;
     opacity: 0.67;
     width: fit-content;
   }