fix: broken scroll effect for sidebar playlist section

resources/assets/js/components/layout/main-wrapper/sidebar/PlaylistFolderSidebarItem.vue

@@ -23,7 +23,7 @@
             v-for="playlist in playlistsInFolder"
             :key="playlist.id"
             :list="playlist"
-            class="pl-4"
+            class="pl-10"
           />
         </ul>
       </li>

resources/assets/js/components/layout/main-wrapper/sidebar/Sidebar.vue

@@ -10,7 +10,7 @@
       <SearchForm />
     </section>
 
-    <section v-koel-overflow-fade class="py-0 px-6 overflow-y-auto space-y-8">
+    <section v-koel-overflow-fade class="py-0 overflow-y-auto space-y-8">
       <SidebarYourMusicSection />
       <SidebarPlaylistsSection />
       <SidebarManageSection v-if="showManageSection" />

resources/assets/js/components/layout/main-wrapper/sidebar/SidebarItem.vue

@@ -1,7 +1,7 @@
 <template>
   <li
     :class="current && 'current'"
-    class="relative before:-right-6 before:top-1/4 before:w-[4px] before:h-1/2 before:absolute before:rounded-full
+    class="relative before:right-0 px-6 before:top-1/4 before:w-[4px] before:h-1/2 before:absolute before:rounded-full
     before:transition-[box-shadow,_background-color] before:ease-in-out before:duration-500"
   >
     <a

resources/assets/js/components/layout/main-wrapper/sidebar/SidebarPlaylistsSection.vue

@@ -5,7 +5,7 @@
       <CreatePlaylistContextMenuButton />
     </SidebarSectionHeader>
 
-    <ul v-koel-overflow-fade class="max-h-[300px] overflow-y-auto">
+    <ul>
       <PlaylistSidebarItem :list="{ name: 'Favorites', songs: favorites }" />
       <PlaylistSidebarItem :list="{ name: 'Recently Played', songs: [] }" />
       <PlaylistFolderSidebarItem v-for="folder in folders" :key="folder.id" :folder="folder" />

resources/assets/js/components/layout/main-wrapper/sidebar/SidebarSectionHeader.vue

@@ -1,5 +1,5 @@
 <template>
-  <h3 class="uppercase tracking-widest mb-3">
+  <h3 class="uppercase px-6 tracking-widest mb-3">
     <slot />
   </h3>
 </template>