make playlist cards smaller on playlist list page

src/components/LeftSidebar/Navigation.vue

@@ -81,7 +81,7 @@ const menus = [
     display: flex;
     align-items: flex-start;
     justify-content: flex-start;
-    padding: $smaller 0;
+    padding: $small 0;
 
     &:hover {
       background-color: $gray3;

src/components/Notification.vue

@@ -42,11 +42,7 @@ const notifStore = useNotifStore();
   place-items: center;
   align-items: center;
   box-shadow: 0px 0px 2rem rgb(0, 0, 0);
-
-  .link {
-    font-weight: bold;
-    text-decoration: underline;
-  }
+  font-size: .85rem;
 }
 
 .notif-error {

src/stores/search.ts

@@ -80,27 +80,21 @@ export default defineStore("search", () => {
   function fetchAlbums(query: string) {
     if (!query) return;
 
-    startLoading();
-    searchAlbums(query)
-      .then((res) => {
-        albums.value = res.albums;
-        albums.more = res.more;
-        albums.query = query;
-      })
-      .then(() => stopLoading());
+    searchAlbums(query).then((res) => {
+      albums.value = res.albums;
+      albums.more = res.more;
+      albums.query = query;
+    });
   }
 
   function fetchArtists(query: string) {
     if (!query) return;
 
-    startLoading();
-    searchArtists(query)
-      .then((res) => {
-        artists.value = res.artists;
-        artists.more = res.more;
-        artists.query = query;
-      })
-      .then(() => stopLoading());
+    searchArtists(query).then((res) => {
+      artists.value = res.artists;
+      artists.more = res.more;
+      artists.query = query;
+    });
   }
 
   function loadTracks() {

src/views/PlaylistList.vue

@@ -25,7 +25,7 @@ const pStore = usePStore();
   scrollbar-color: $gray2 transparent;
 
   .grid {
-    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
     gap: 1rem;
 
     @include for-desktop-down {