try to fix scrollbar differences

+ add hover states to albumcard and artist card

src/assets/scss/Global/app-grid.scss

@@ -59,9 +59,9 @@
 
 #acontent {
   grid-area: content;
-  overflow: hidden scroll;
+  overflow: hidden auto;
-  margin-right: -1rem;
+  margin-right: calc(0rem - ($medium + 2px));
-  padding-right: calc($medium - 1px);
+  padding-right: calc($medium);
 
   .nav {
     margin: $small;

src/assets/scss/Global/scrollbars.scss

@@ -1,5 +1,5 @@
 ::-webkit-scrollbar {
-  width: $smaller;
+  width: 3px;
 }
 
 /* Track */

src/assets/scss/moz.scss

@@ -2,10 +2,18 @@
 
 @-moz-document url-prefix() {
   #acontent {
-    margin-right: -1rem;
+    margin-right: calc(-1rem + 1px);
     padding-right: 1rem;
   }
 
+  .header-list-layout {
+    margin-right: calc(0rem - ($medium + 4px)) !important;
+
+    .scrollable {
+      padding-right: calc(1rem - 3px) !important;
+    }
+  }
+
   #app-grid.isSmall,
   #app-grid.disableSidebar {
     #acontent {

src/components/shared/AlbumCard.vue

@@ -28,9 +28,12 @@ defineProps<{
 .result-item {
   display: grid;
   gap: $small;
-  padding: $small;
+  padding: $medium;
-  transition: all 0.5s ease;
+  border-radius: 1rem;
-  border-radius: 0.7rem;
+
+  &: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
+    <img class="artist-image circular" :src="imguri + artist.image" loading="lazy" />
-      class="artist-image shadow-sm"
+    <div class="artist-name t-center">
-      :src="imguri + artist.image"
+      {{ artist.name }}
-      loading="lazy"
-    />
-    <div>
-      <p class="artist-name t-center">{{ artist.name }}</p>
     </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;
   }

src/layouts/HeaderAndVList.vue

@@ -6,7 +6,7 @@
       :style="{ paddingTop: headerHeight - 64 + 16 + 'px' }"
       @scroll="handleScroll"
     >
-      <div v-bind="wrapperProps">
+      <div v-bind="wrapperProps" class="scrollable">
         <div class="header rounded" style="height: 64px">
           <div
             ref="header"
@@ -88,6 +88,13 @@ function handleScroll(e: Event) {
 
 <style lang="scss">
 .header-list-layout {
+  margin-right: calc(0rem - ($medium));
+
+  .scrollable {
+    padding-right: calc(1rem - $small + 2px);
+    scrollbar-width: thin;
+  }
+
   .header {
     position: relative;
 

src/views/Search.vue

@@ -22,8 +22,8 @@ import Main from "@/components/RightSideBar/Search/Main.vue";
   }
 
   .artists-results {
-    margin-right: $small;
+    margin-right: calc($medium + 1px);
-    margin-left: -$small;
+    margin-left: 0;
   }
 
   .search-results-grid {