fix album and artist card search results responsiveness

src/components/shared/AlbumCard.vue

@@ -6,17 +6,11 @@
     }"
     class="result-item"
   >
-    <div class="img">
-      <div
-        class="album-art image"
-        :style="{
-          backgroundImage: `url(&quot;${imguri + album.image}&quot;)`,
-        }"
-      ></div>
-      <div class="play shadow-lg image"></div>
+    <img class="rounded" :src="imguri + album.image" alt="" />
+    <div>
+      <h4 class="title ellip">{{ album.title }}</h4>
+      <div class="artist ellip">{{ album.artist }}</div>
     </div>
-    <div class="title ellip">{{ album.title }}</div>
-    <div class="artistsx ellipsis">{{ album.artist }}</div>
   </router-link>
 </template>
 
@@ -32,60 +26,31 @@ defineProps<{
 
 <style lang="scss">
 .result-item {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+  display: grid;
+  gap: $small;
   padding: $small;
-  border-radius: 0.75rem;
-  text-align: left !important;
   background-color: $gray4;
-  color: #ffffffde !important;
   transition: all 0.5s ease;
-  min-width: 8.5rem;
+  border-radius: .7rem;
 
-  .img {
-    position: relative;
+  img {
+    width: 100%;
+    height: auto;
+  }
 
-    &:hover {
-      .play {
-        visibility: visible;
-      }
-    }
-
-    .play {
-      width: 3rem;
-      height: 3rem;
-      background-color: $gray;
-      border-radius: 1rem;
-      position: absolute;
-      left: 2rem;
-      bottom: 2.5rem;
-      background-image: url("../../assets/icons/play.svg");
-      background-size: 2rem;
-      background-position: 60% 50%;
-      visibility: hidden;
-    }
-
-    .album-art {
-      height: 7.5rem;
-      width: 7.5rem;
-      border-radius: 0.5rem;
-      margin-bottom: 0.5rem;
-    }
+  h4 {
+    margin: 0;
   }
 
   .title {
-    width: 7rem;
-    margin-bottom: 0.25rem;
+    margin-bottom: $smaller;
     font-size: 0.9rem;
-    font-weight: bold;
   }
 
-  .artistsx {
-    width: 7rem;
+  .artist {
     font-size: 0.8rem;
     text-align: left;
-    color: #ffffffbd;
+    opacity: .75;
   }
 }
 </style>

src/components/shared/ArtistCard.vue

@@ -3,7 +3,6 @@
     <img
       class="artist-image shadow-sm"
       :src="imguri + artist.image"
-      alt=""
       loading="lazy"
     />
     <div>
@@ -30,13 +29,10 @@ defineProps<{
   overflow: hidden;
   position: relative;
 
-  min-width: 8.5em;
-  height: 11em;
   border-radius: 0.75rem;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+  display: grid;
   justify-content: center;
+  padding: 1rem $small;
   cursor: pointer;
 
   .artist-image {
@@ -66,5 +62,15 @@ defineProps<{
 
 ._is_on_sidebar {
   background-color: $gray4 !important;
+
+  .artist-image {
+    width: 7rem;
+    height: 7rem;
+
+    @include for-desktop-down {
+      width: 6rem;
+      height: 6rem;
+    }
+  }
 }
 </style>