try to fix scrollbar differences

+ add hover states to albumcard and artist card

src/components/shared/AlbumCard.vue

@@ -28,9 +28,12 @@ defineProps<{
 .result-item {
   display: grid;
   gap: $small;
-  padding: $small;
-  transition: all 0.5s ease;
-  border-radius: 0.7rem;
+  padding: $medium;
+  border-radius: 1rem;
+
+  &:hover {
+    background-color: $gray4;
+  }
 
   img {
     width: 100%;

src/components/shared/ArtistCard.vue

@@ -1,12 +1,8 @@
 <template>
   <div class="artist-card" :class="{ _is_on_sidebar: alt }">
-    <img
-      class="artist-image shadow-sm"
-      :src="imguri + artist.image"
-      loading="lazy"
-    />
-    <div>
-      <p class="artist-name t-center">{{ artist.name }}</p>
+    <img class="artist-image circular" :src="imguri + artist.image" loading="lazy" />
+    <div class="artist-name t-center">
+      {{ artist.name }}
     </div>
   </div>
 </template>
@@ -29,14 +25,21 @@ defineProps<{
   overflow: hidden;
   position: relative;
 
-  border-radius: 0.75rem;
+  border-radius: $medium;
   display: grid;
+  gap: $small;
   justify-content: center;
+  padding: 1.2rem 1rem !important;
+  font-size: 0.9rem;
+  font-weight: bolder;
+
+  &:hover {
+    background-color: $gray4;
+  }
 
   .artist-image {
     width: 100%;
-    border-radius: 60%;
-    margin-bottom: $small;
+    // margin-bottom: $small;
     transition: all 0.5s ease-in-out;
     object-fit: cover;
   }