fix scrolling issue in sidebar search components

src/components/PlaylistView/Header.vue

@@ -28,24 +28,26 @@
       <span class="status"
         >Last updated {{ info.last_updated }} &#160;|&#160;&#160;</span
       >
-      <span class="edit" @click="editPlaylist">Edit</span>
+      <span class="edit" @click="editPlaylist">Edit&#160;&#160;|</span>
+      <DeleteSvg class="edit"/>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from "vue";
+import { storeToRefs } from "pinia";
 
 import useNavStore from "@/stores/nav";
 import usePStore from "@/stores/pages/playlist";
-import useModalStore from "../../stores/modal";
+import useModalStore from "@/stores/modal";
 
+import { paths } from "@/config";
 import { playSources } from "@/composables/enums";
 import { formatSeconds, useVisibility } from "@/utils";
-import { paths } from "../../config";
 
-import { storeToRefs } from "pinia";
 import PlayBtnRect from "../shared/PlayBtnRect.vue";
+import DeleteSvg from "@/assets/icons/delete.svg";
 
 const modal = useModalStore();
 const nav = useNavStore();
@@ -89,7 +91,7 @@ function editPlaylist() {
     position: absolute;
     bottom: 1rem;
     right: 1rem;
-    padding: 0.5rem;
+    padding: $smaller $small;
     background-color: $body;
     color: rgb(255, 255, 255);
     font-size: 0.9rem;
@@ -97,14 +99,12 @@ function editPlaylist() {
     box-shadow: 0 0 1rem rgba(0, 0, 0, 0.479);
     z-index: 12;
 
-    @include phone-only {
+    display: flex;
-      bottom: 1rem;
+    align-items: center;
-      right: 1rem;
-      font-size: small;
 
-      .status {
+    svg {
-        display: none;
+      transform: scale(.75);
-      }
+    margin-bottom: -0.2rem;
     }
 
     .edit {

src/components/RightSideBar/Search/Main.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="right-search">
     <TabsWrapper
-      :isOnSearchPage="isOnSearchPage"
       :tabs="tabs"
       @switchTab="switchTab"
       :currentTab="currentTab"

src/components/RightSideBar/Search/Tab.vue

@@ -1,5 +1,7 @@
 <template>
-  <component :is="getComponent()?.component" v-bind="getComponent()?.props" />
+  <div style="height: 100%">
+    <component :is="getComponent()?.component" v-bind="getComponent()?.props" />
+  </div>
 </template>
 
 <script setup lang="ts">

src/components/RightSideBar/Search/TabsWrapper.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="right-tabs" :class="tabContent">
+  <div id="right-tabs" :class="{ tabContent: tabContent }">
     <div class="tab-buttons-wrapper">
       <div class="tabheaders rounded-sm no-scroll">
         <div
@@ -34,21 +34,25 @@ const emit = defineEmits<{
 
 <style lang="scss">
 #right-tabs {
-  height: 100%;
   display: grid;
+  position: absolute; // TODO: Find a way to fix scrollability without using position absolute.
+  overflow: hidden;
+
+  height: 100%;
+  width: 100%;
 
   .tab-buttons-wrapper {
     display: flex;
     justify-content: center;
     align-items: center;
   }
+}
 
-  #tab-content {
+#tab-content {
-    height: 100%;
+  height: 100%;
-    overflow: scroll;
+  overflow: scroll;
-    overflow-x: hidden;
+  overflow-x: hidden;
-    padding-bottom: 1rem;
+  padding-bottom: 1rem;
-  }
 }
 
 #right-tabs.tabContent {

src/components/nav/Titles/SearchTitle.vue

@@ -1,27 +1,29 @@
 <template>
   <div class="nav-search-input">
     <SearchInput :on_nav="true" />
-    <Tabs
+    <div class="buttons-area">
-      :tabs="tabs"
+      <Tabs
-      :currentTab="($route.params.page as string)"
+        :tabs="tabs"
-      @switchTab="(tab: string) => {
+        :currentTab="($route.params.page as string)"
+        @switchTab="(tab: string) => {
         $router.replace({ name: Routes.search, params: { page: tab }, query: {
           q: search.query,
         } });
         search.switchTab(tab);
       }"
-    />
+      />
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import Tabs from "@/components/RightSideBar/Search/TabsWrapper.vue";
-import SearchInput from "@/components/RightSideBar/SearchInput.vue";
 import { Routes } from "@/router/routes";
 
 import useSearchStore from "@/stores/search";
-const search = useSearchStore();
+import Tabs from "@/components/RightSideBar/Search/TabsWrapper.vue";
+import SearchInput from "@/components/RightSideBar/SearchInput.vue";
 
+const search = useSearchStore();
 const tabs = ["tracks", "albums", "artists"];
 </script>
 
@@ -32,9 +34,19 @@ const tabs = ["tracks", "albums", "artists"];
   grid-template-columns: 1fr max-content;
   gap: 1rem;
   
+  .buttons-area {
+    position: relative;
+    height: 100%;
+    width: 12rem;
+  }
+
   #right-tabs {
-    display: grid;
+    width: max-content;
-    align-items: center;
+    height: max-content;
+
+    .tabheaders {
+      height: 38px;
+    }
   }
 
   .tabheaders {

src/stores/search.ts

@@ -83,10 +83,14 @@ export default defineStore("search", () => {
     if (!query) return;
 
     searchTracks(query).then((data) => {
-      const scrollable = document.getElementById(
+      let scrollable = document.getElementById(
         "songlist-scroller"
       ) as HTMLElement;
 
+      if (scrollable === null) {
+        scrollable = document.createElement("div");
+      }
+
       waitForScrollEnd(scrollable, 0).then(() => {
         tracks.value = data.tracks;
         tracks.more = data.more;