use directive to add tooltip

+ change grid size for search page
+

src/views/PlaylistList.vue

@@ -1,7 +1,6 @@
 <template>
   <div id="p-view">
     <div class="grid">
-      <!-- <NewPlaylistCard /> -->
       <PlaylistCard
         v-for="p in pStore.playlists"
         :key="p.playlistid"
@@ -14,7 +13,6 @@
 <script setup lang="ts">
 import PlaylistCard from "@/components/PlaylistsList/PlaylistCard.vue";
 
-// import NewPlaylistCard from "@/components/PlaylistsList/NewPlaylistCard.vue";
 import usePStore from "@/stores/pages/playlists";
 const pStore = usePStore();
 </script>
@@ -27,14 +25,6 @@ const pStore = usePStore();
   .grid {
     grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
     gap: 1rem;
-
-    // @include for-desktop-down {
-    //   grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
-
-    //   .name {
-    //     font-size: 0.9rem;
-    //   }
-    // }
   }
 }
 </style>

src/views/Search.vue

@@ -13,12 +13,17 @@ import Main from "@/components/RightSideBar/Search/Main.vue";
 <style lang="scss">
 .search-view {
   height: 100%;
-  background-color: $black;
+  // background-color: $black;
   padding-top: 0;
+  margin-right: -1rem;
 
   .scrollable {
     height: 100%;
     overflow: auto;
   }
+
+  .search-results-grid {
+    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
+  }
 }
 </style>