fix albumView using watch function

- other minor changes to almost all files

src/components/shared/AlbumCard.vue

@@ -32,6 +32,7 @@ export default {
   border-radius: $small;
   text-align: left !important;
   width: 9rem;
+  // border: solid 1px red !important;
 
   .album-art {
     height: 7rem;

src/components/shared/ArtistCard.vue

@@ -21,7 +21,6 @@ export default {
   flex: 0 0 auto;
   overflow: hidden;
   position: relative;
-  margin: 0 $small 0 0;
 
   width: 9em;
   height: 11em;

src/components/shared/SongItem.vue

@@ -14,7 +14,6 @@
       </div>
       <div>
         <span class="ellip">{{ song.title }}</span>
-        <div class="separator no-border"></div>
         <div class="artist ellip">
           <span v-for="artist in putCommas(song.artists)" :key="artist">
             {{ artist }}

src/components/shared/TrackItem.vue

@@ -60,6 +60,9 @@ const playThis = (song) => {
   align-items: center;
   padding: 0.5rem;
   border-radius: 0.5rem;
+  position: relative;
+  height: 4rem;
+  padding-left: 4rem;
 
   &:hover {
     cursor: pointer;
@@ -72,6 +75,8 @@ const playThis = (song) => {
   }
 
   .album-art {
+    position: absolute;
+    left: $small;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -83,7 +88,6 @@ const playThis = (song) => {
     background-image: url(../../assets/images/null.webp);
   }
   .artist {
-    width: 20rem;
     font-size: small;
     color: rgba(255, 255, 255, 0.637);
   }