fix album and artist card search results responsiveness

src/components/RightSideBar/Search/ArtistGrid.vue

@@ -1,6 +1,9 @@
 <template>
-  <div class="artists-results" v-if="search.artists.value.length">
-    <div class="search-results-grid">
+  <div class="artists-results">
+    <div class="search-results-grid" v-if="album_grid == true">
+      <AlbumCard v-for="a in search.albums.value" :key="a.albumid" :album="a" />
+    </div>
+    <div class="search-results-grid" v-else>
       <ArtistCard
         v-for="artist in search.artists.value"
         :key="artist.image"
@@ -14,10 +17,17 @@
 
 <script setup lang="ts">
 import useSearchStore from "../../../stores/search";
+
+import AlbumCard from "@/components/shared/AlbumCard.vue";
 import ArtistCard from "../../shared/ArtistCard.vue";
 import LoadMore from "./LoadMore.vue";
+
 const search = useSearchStore();
 
+defineProps<{
+  album_grid?: boolean;
+}>();
+
 function loadMore() {
   search.updateLoadCounter("artists");
   search.loadArtists(search.loadCounter.artists);
@@ -25,18 +35,14 @@ function loadMore() {
 </script>
 
 <style lang="scss">
-.right-search .artists-results {
+.artists-results {
   display: grid;
   margin: 0 1rem;
+}
 
-  .xartist {
-    background-color: $gray;
-
-    .artist-image {
-      width: 7rem;
-      height: 7rem;
-      object-fit: cover;
-    }
-  }
+.search-results-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 0.75rem;
 }
 </style>

src/components/RightSideBar/Search/Main.vue

@@ -5,7 +5,7 @@
         <TracksGrid />
       </Tab>
       <Tab name="albums">
-        <AlbumGrid />
+        <ArtistGrid :album_grid="true" />
       </Tab>
       <Tab name="artists">
         <ArtistGrid />
@@ -15,7 +15,6 @@
 </template>
 
 <script setup lang="ts">
-import AlbumGrid from "./AlbumGrid.vue";
 import ArtistGrid from "./ArtistGrid.vue";
 import Tab from "./Tab.vue";
 import TabsWrapper from "./TabsWrapper.vue";
@@ -36,11 +35,7 @@ import TracksGrid from "./TracksGrid.vue";
     font-size: 2rem;
     color: $white;
   }
-  .search-results-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 0.75rem;
-  }
+
 
   .input {
     display: flex;