fix ArtistName component width calculation in vTooltip

+ add tracklist breakpoints to virtual scroll page layout

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;
   }