implement reactive breakpoints

+ fix breaking queue page when there's no data

src/components/LeftSidebar/NP/SongCard.vue

@@ -25,10 +25,10 @@
     </router-link>
 
     <div class="bottom">
-      <div class="title ellip t-center">{{ props.track?.title }}</div>
+      <div class="title ellip t-center">{{ props.track?.title || '♥ Hello ♥' }}</div>
       <ArtistName
-        :artists="track?.artists || ['Artist']"
-        :albumartist="track?.albumartist"
+        :artists="track?.artists || []"
+        :albumartist="track?.albumartist || 'Play something'"
         class="artists"
       />
     </div>

src/components/nav/Titles/QueueTitle.vue

@@ -82,7 +82,7 @@ function getSource() {
       };
 
     default:
-      return { name: "Ghost source" };
+      return { name: "👻 Ghost source", location: {} };
   }
 }
 
@@ -113,13 +113,13 @@ const { name, icon: SourceIcon, location } = getSource();
         grid-template-columns: max-content 1fr;
         align-items: center;
         padding: $smaller $small;
+        height: 100%;
       }
 
       svg {
         transform: scale(0.9);
       }
     }
-
   }
 
   .queue-actions {

src/components/shared/ArtistName.vue

@@ -1,6 +1,9 @@
 <template>
   <div v-tooltip="returnArtists()" style="width: auto">
-    <div class="ellip" v-if="artists[0] === '' && artists.length === 1">
+    <div
+      class="ellip"
+      v-if="artists.length === 0 || (artists[0] === '' && artists.length === 1)"
+    >
       <span>{{ albumartist }}</span>
     </div>
     <div class="ellip" v-else>